> ## Documentation Index
> Fetch the complete documentation index at: https://strapi-suite.littlebox.pt/llms.txt
> Use this file to discover all available pages before exploring further.

# Essentials

> Understand the core structure and essential files of the frontend framework.

This guide covers the essential files and directories of the frontend framework. It explains the purpose of each component and differentiates between the framework core and your project-specific implementations.

## Core Directory

The `app/core` folder is the heart of the framework. You generally do not need to touch these files unless you are modifying the framework itself.

### `types.ts`

Located in `app/core/types.ts`, this file handles all the TypeScript interfaces that map to the Strapi data models. It defines the structure for Pages, Menus, and other core data types used throughout the application.

### `components`

The `app/core/components` directory contains the base React components that drive the application, such as the Base Layout, Base Template, and JSON-LD components. These ensure consistent rendering and SEO structure across your site.

### `contexts`

The `app/core/contexts` directory provides the React Contexts that manage global state. This includes:

* **Locale**: Manages the current language and routing.
* **Menu**: Handles the navigation data fetched from Strapi.
* **Parameters**: Stores global configuration settings.

### `lib`

The `app/core/lib` folder contains utility functions, most notably the `metaDataGenerator`, which standardizes how SEO metadata is constructed from Strapi data.

## Root Application Files

These files sit at the root of the `app` directory and serve as the entry points for your application.

### `layout.tsx`

This is your root layout file. It wraps your entire application with necessary providers (Locale, Menu, Parameters, NextIntl) and handles font loading (`Inter` and `Ovtreasure`).
**Note**: While this is a framework file, you modify it to add custom providers, change fonts, or update favicons.

### `page.tsx`

This file acts as the main entry point for the homepage. It fetches the initial data and dynamically determines which template to render based on the `model` attribute from Strapi. It also executes the `content.ts` injection strategy if one exists for the active template.

### `global.scss`

Located at `app/globals.scss`, this file holds the global styles. It is part of the framework structure, but you use it to import your project's custom SCSS or define global CSS rules.

### `not-found.tsx`

This file handles 404 errors. The framework provides the structure, but you implement the specific UI (images, text, layout) to match your project's design.

### SEO Files

* **`robots.ts`**: Automatically generates the `robots.txt` file based on environment variables.
* **`sitemap.ts`**: Automatically generates the `sitemap.xml` by fetching all valid pages from Strapi and mapping their localized URLs.

## Dynamic Routing

The framework handles routing dynamically through the `app/(pages)` directory.

### `[...slug]/page.tsx`

Located in `app/(pages)/[...slug]/page.tsx`, this file catches all routes that are not the homepage.

* **Functionality**: It uses the URL slug to fetch the corresponding page data from Strapi and renders the appropriate template.
* **Customization**: Although this is a framework file, it serves as a key integration point. You can modify it to add global components that should appear on all inner pages, such as specific headers, floating action buttons, or other layout elements that are independent of the chosen template.

## Templates System

The framework uses a dynamic template system located in `app/templates`.

### Default Template

The `app/templates/default` folder is the only template included with the framework core.

* **`index.tsx`**: The main component that iterates over the blocks defined in Strapi and renders the corresponding React components.

### Content Injection (`content.ts`)

You can inject custom data into a template using a `content.ts` file. This file usually resides in your template folder (e.g., `app/templates/default/content.ts`). Check the [Templates](/frontend/guides/templates) section for a better understanding of how `content.ts` works.

The `content.ts` export allows you to:

1. **Modify the Page Object**: You can use this function to modify the page object and inject custom data. For example, or you can add a custom property to the page object, or change the existing ones, etc.
2. **Fetch External Data**: It's possible to use this function to fetch data from external sources and inject it into the page object.

Example usage in `content.ts`:

```typescript theme={null}
import { Page } from "@/app/core/types";

export default async function (page: Page): Promise<void> {
  // Inject custom property into the page object
  page.document.custom = "custom property value";

  // Fetch external data and inject it
  const response = await fetch("https://api.example.com/data");
  const data = await response.json();
  page.document.externalData = data;
}
```

## Internationalization

### `proxy.ts`

This file connects your Next.js application to the Strapi backend to validate locales. It checks the URL path, verifies if the requested locale exists in Strapi, and manages the routing and cookie setting for internationalization.

### `i18n` Folder

The `i18n` directory configures the `next-intl` library. It handles the request scope and fetches the translation strings directly from Strapi.

**What are "Translations"?**

These translations are standalone strings that do not belong to any specific document (page) context. They are typically used for static UI elements like buttons ("Book now"), labels ("About us"), or error messages. By fetching them from the backend, you ensure these strings can be managed via the CMS without requiring code deployments for text changes.

For more details on how these are managed in the backend, refer to the [Translations](/backend/guides/translations) guide.

## Project vs. Framework

While the folder structure is provided by the framework, the contents of the following directories are usually 100% your project's implementation:

* **`app/api`**: Create your custom API endpoints.
* **`app/components`**: Build your project-specific UI components.
* **`app/context`**: Create custom React contexts for your application's specific needs.
* **`app/assets`**: Store your static assets (images, fonts, etc.).