> 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 %}

***