> For the complete documentation index, see [llms.txt](https://tech.x2bee.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tech.x2bee.com/dev-guide/developer-guide-en/pjt-prepare/publish-your-docs/store-front-framework-next.js/01.-setup/6.-environment-and-metadata.md).

# 6. Environment and Metadata

This document is a guide to environment variable and metadata configuration in a Next.js project.\
First, it explains environment variable configuration, then explains how to configure the `next.config.js` file.\
Through the content below, you can learn about environment variables, metadata, file structure, and configuration.

***

## Environment variables

Reference: <https://nextjs.org/docs/app/building-your-application/configuring/environment-variables#environment-variable-load-order>

* Development environment: create a `.env.development.local` file and run it with `npm run dev`.
* Deployment (production) environment: create a `.env.production.local` file.
* When referencing in code, access it in the form `process.env`. Example: `process.env.API_URL`

{% stepper %}
{% step %}

### Create the Environment Variable File (Development)

Create the file used during development at the project root:

* .env.development.local

Add the keys and values needed for each environment.
{% endstep %}

{% step %}

### Create the Environment Variable File (Production)

Create the file used in the deployment environment at the project root:

* .env.production.local

Before deployment, make sure this file is configured correctly.
{% endstep %}

{% step %}

### Usage in Code

When referencing environment variables in code, use them as follows:

```javascript
process.env.API_URL
```

{% endstep %}
{% endstepper %}

***

## next.config.js

Reference:

* <https://nextjs.org/docs/app/building-your-application/configuring/typescript#type-checking-nextconfigjs>
* <https://nextjs.org/docs/app/api-reference/next-config-js>

{% hint style="info" %}
The `next.config.js` file is a configuration file referenced when building the Next.js server. This file is not parsed as a regular Node module or by Babel/TS, so it cannot be renamed to a `.ts` extension. It must be placed at the project root as `next.config.js`.
{% endhint %}

Create a `next.config.js` file at the root as follows and add your configuration:

{% code title="next.config.js" %}

```javascript
/** @type {import('next').NextConfig} */
const nextConfig = {
  /* config options here */
}

module.exports = nextConfig
```

{% endcode %}

***

## favicon.ico, Title, and Metadata

* In the past, `favicon.ico` was placed in the `public` folder, but now it can also be placed in the `src/app` folder.
* The current trend is to display the browser title in the form "Subtitle | Site Name".

For example, add the following to `src/app/layout.tsx`:

```typescript
import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: {
    default: 'NEXT MALL',
    template: '%s | NEXT MALL',
  },
  description: 'X2BEE MALL FO by Plateer',
  icons: {
    icon: '/favicon.ico',
  },
};
```

* With this configuration, when an individual `page.tsx` does not have title metadata, `NEXT MALL` is displayed as the default value.
* If a `page.tsx` sets its own subtitle (title), it will be displayed in the form `Subtitle | NEXT MALL`.

### Example Metadata for a Subfolder

```typescript
import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: "My Page",
  description: 'X2BEE MALL FO by Plateer',
};
```

With this configuration, the browser title will appear as `My Page | NEXT MALL`.

***

## Naming conventions

Unlike Nuxt, the following conventions are recommended.

* Folders (file-based routing): use kebab-case (URL friendly)
  * BAD: `myComponent/page.tsx`, `Mycomponent/page.tsx`
  * GOOD: `my-component/page.tsx`

Note: In Vercel's official GitHub examples, file names are entirely kebab-case. Some parts inside the `src/components` folder may be camelCase, but for consistency X2bee standardizes on kebab-case.

* Component names: use PascalCase
  * Example: `export default const MyComponent = () => { ... }`
* There is no functional issue if a component's file/folder name differs from the name used inside the component, but for readability and debugging it is recommended to keep them consistent where possible.

***

## Import alias

You can set up path aliases in tsconfig.json to simplify imports.

{% tabs %}
{% tab title="When the project has an src folder" %}
tsconfig.json example:

```json
{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  }
  // ...
}
```

{% endtab %}

{% tab title="When the project does not have an src folder" %}
tsconfig.json example:

```json
{
  "compilerOptions": {
    "paths": {
      "@/*": ["./*"]
    }
  }
  // ...
}
```

{% endtab %}
{% endtabs %}

***