> 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/pjt-prepare/publish-your-docs/store-front-framewok-next.js/01.-setup/6.-metadata.md).

# 6. 환경 및 Metadata

이 문서는 Nextjs 프로젝트에서 환경 변수 및 메타데이터 설정에 관한 안내입니다.\
먼저, 환경 변수 설정에 대해 설명하고 `next.config.js` 파일을 설정하는 방법을 설명합니다.\
아래의 내용을 통해서 환경 변수, 메타데이터, 파일 구조 및 설정을 알 수 있습니다.

***

## Environment variables

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

* 개발 환경: `.env.development.local` 파일을 생성하고 `npm run dev`로 실행합니다.
* 배포(프로덕션) 환경: `.env.production.local` 파일을 생성합니다.
* 코드에서 참조할 때는 `process.env` 형태로 접근합니다. 예: `process.env.API_URL`

{% stepper %}
{% step %}

### 환경 변수 파일 생성 (개발)

개발 실행 시 사용되는 파일을 프로젝트 루트에 생성합니다:

* .env.development.local

환경별로 필요한 키와 값을 추가합니다.
{% endstep %}

{% step %}

### 환경 변수 파일 생성 (프로덕션)

배포 환경에서 사용되는 파일을 프로젝트 루트에 생성합니다:

* .env.production.local

배포 전 해당 파일이 올바르게 설정되었는지 확인하세요.
{% endstep %}

{% step %}

### 코드에서 사용

코드 상에서 환경 변수를 참조할 때는 다음과 같이 사용합니다:

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

{% endstep %}
{% endstepper %}

***

## next.config.js

참고:

* <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" %}
`next.config.js` 파일은 Next.js 서버 빌드 시 참조되는 설정 파일입니다. 이 파일은 일반적인 Node 모듈이나 Babel/TS로 파싱되지 않으므로 `.ts` 확장자로 바꿀 수 없습니다. 반드시 `next.config.js`로 프로젝트 루트에 위치시켜야 합니다.
{% endhint %}

다음과 같이 루트에 `next.config.js` 파일을 만들고 설정을 추가합니다:

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

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

module.exports = nextConfig
```

{% endcode %}

***

## favicon.ico, Title 및 Metadata

* 예전에는 `public` 폴더에 `favicon.ico`를 넣었지만, 현재는 `src/app` 폴더에 넣어도 됩니다.
* 요즘 트렌드는 브라우저 타이틀을 "소제목 | 홈페이지이름" 형태로 표시하는 것입니다.

예시로 `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',
  },
};
```

* 이 설정이 있으면 각 `page.tsx`에 title metadata가 없을 때 기본값으로 `NEXT MALL`이 표시됩니다.
* `page.tsx`에서 소제목(title)을 별도로 설정하면 `소 제목 | NEXT MALL` 형태로 표시됩니다.

### Subfolder의 Metadata 예시

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

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

위와 같이 설정하면 브라우저 타이틀에 `My Page | NEXT MALL`로 나타납니다.

***

## Naming conventions

Nuxt와는 반대로, 다음 컨벤션을 권장합니다.

* 폴더(파일 기반 라우팅): kebab-case 사용 (URL 친화적)
  * BAD: `myComponent/page.tsx`, `Mycomponent/page.tsx`
  * GOOD: `my-component/page.tsx`

참고: Vercel 공식 GitHub 예제에서는 파일명이 전부 kebab-case입니다. `src/components` 폴더 내부 일부가 camelCase인 경우도 있으나, 통일성을 위해 X2bee는 kebab-case로 통일합니다.

* Component 이름: PascalCase 사용
  * 예: `export default const MyComponent = () => { ... }`
* 컴포넌트의 파일/폴더 이름과 컴포넌트 내부 이름은 달라도 동작에는 문제가 없지만, 가독성과 디버깅을 위해 가능하면 일치시키는 것을 권장합니다.

***

## Import alias

tsconfig.json에서 경로 별칭을 설정하여 import를 간편하게 할 수 있습니다.

{% tabs %}
{% tab title="프로젝트에 src 폴더가 있을 때" %}
tsconfig.json 예시:

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

{% endtab %}

{% tab title="프로젝트에 src 폴더가 없을 때" %}
tsconfig.json 예시:

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

{% endtab %}
{% endtabs %}

***


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://tech.x2bee.com/dev-guide/pjt-prepare/publish-your-docs/store-front-framewok-next.js/01.-setup/6.-metadata.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.