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

1

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

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

• .env.development.local

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

2

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

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

• .env.production.local

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

3

코드에서 사용

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

process.env.API_URL

---

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

next.config.js 파일은 Next.js 서버 빌드 시 참조되는 설정 파일입니다. 이 파일은 일반적인 Node 모듈이나 Babel/TS로 파싱되지 않으므로 .ts 확장자로 바꿀 수 없습니다. 반드시 next.config.js로 프로젝트 루트에 위치시켜야 합니다.

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

next.config.js

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

module.exports = nextConfig

---

favicon.ico, Title 및 Metadata

• 예전에는 public 폴더에 favicon.ico를 넣었지만, 현재는 src/app 폴더에 넣어도 됩니다.

• 요즘 트렌드는 브라우저 타이틀을 "소제목 | 홈페이지이름" 형태로 표시하는 것입니다.

예시로 src/app/layout.tsx에 다음을 추가합니다:

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 예시

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를 간편하게 할 수 있습니다.

프로젝트에 src 폴더가 있을 때

tsconfig.json 예시:

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

프로젝트에 src 폴더가 없을 때

tsconfig.json 예시:

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

---