6. Set up - 환경 및 metadata

Environment variables

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

npm run dev에서 실행되는 

.env.development.local 생성

그리고 배포 환경에서 실행되는

.env.production.local 를 생성한다.

코드 상에서 참조시

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

위에 공식 문서를 보면 이 파일은 일반적인 node module도 아니고 Babel이나 TS로 parse도 되지않기때문에 .ts로 바꿀 수 없다.

오직 Next.js server build시 참조되는 config 파일. 

next.config.js라는 이름의 파일을 root에 만들고 다음 코드 입력

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

 

favicon.ico, Title 및 Metadata

favicon은 기존에는 public 폴더에 넣었지만 이제는 src/app 폴더에 넣으면 된다.

Title의 경우 요즘 트렌드는 '소제목 | 홈페이지이름' 이렇게 표시해주는 트렌드다.

이를 위해 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'이 나타나게된다.

 

소제목 설정 방법은

import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'SubMenu',
  description: 'Plateer AI butler, Alfredo',
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return <>{children}</>;
}

 

이렇게 하면 이 페이지에 들어올 때 title이 SubMenu | NEXT MALL로 나타나게 된다.

 

Naming conventions

Nuxt랑 반대로 다음 convention을 추천.

폴더 이름은 file-based routing이 가능하니, kebab case를 사용하는 url 방식을 따름.

Component 이름은 PascalCase로 사용.

Component 이름은 폴더 이름과 다르게 지어도 전혀 상관없음. (오직 참조와 디버깅 용)

그러나 가능하면 맞춰주는 것이 편하다.

예시:

src/app/about-me/page.tsx 파일에

export default function AboutMe () => {
...

 

Import alias

src 폴더를 사용할 경우, tsconfig.json에

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

 

src 폴더를 사용하지 않을 경우, tsconfig.json에

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

 

이 가이드 문서의 예제는 src 폴더를 사용하니, src/app/layout.tsx 파일에서 테일윈드를 참조하는 임포트 구문을 수정할 수 있다.

# import '/src/app/ui/globals.css'; -> 이부분을 아래 줄처럼 바꾼다.
import '@app/ui/globals.css
 ...