01-5. Create Next.js app (metadata등)

Environment variables

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

위 링크를 들어가보면 어떤 .env를 우선적으로 적용하는지 설명이 되어있다.

Vue나 React처럼 dotenv 패키지를 설치하고, local, dev, stage, prod로 나눌 수 있으면 좋겠는데

Next.js에서는 dev, prod, test 3가지만 기본적으로 제공해주고 있다.

일단 나는 dev를 local환경으로 쓰고, prod를 배포용 환경으로 쓰려고 한다. 추가로 세분화하고 싶다면 추가 설정이 더 필요하다.

테스트를 위해

.env.development.local 생성하고

API_URL=local_server

.env.production.local 를 생성하고

API_URL=development_server

두 파일을 생성한다.

package.json에 다음 두 줄을 추가한다.

  "scripts": {
    ...
    "build:dev": "next build",
    "start:dev": "next start",

:dev를 붙인 이유는 단순히 CI/CD pipline 코드에서 저걸 사용하기 때문이다.

그리고 테스트를 위해 app/page.tsx에 다음 코드 추가

console.log('OK', process.env.API_URL);

다시 요약해서 말하면 npm run dev를 하면 "local_server"가 출력될 것이고

npm run build:dev를 실행하면 "development_server"라는 문구가 출력될 것이다.

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

README.md

git repo에 올렸을 때 처음 노출되는 가이드 화면이다.

README.md 파일을 생성하고 아래처럼 간단히 써둔다.

## Getting Started

---

run in local(dev) environment

```bash

npm run dev

```

run in deployment environment

```bash

npm run build:dev

npm run start:dev

```

Title & Meta tags

이것도 기존 pages router 방식에 비해 조금 달라졌다.

이번 app router 방식은 그냥 한꺼번에 RootLayout (app/layout.tsx)에 넣어도 되고, 각각의 page.tsx에 넣어도 된다.

제목을 layout.tsx에 기본으로 적고, 각 page.tsx에서 overwrite하는 방식으로 섞어쓰는 방식도 가능하다.

우선 favicon.ico (png파일도 가능)을 app 폴더에 넣어놓는다.

app/layout.tsx에 다음을 입력

import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'NEXT.js MALL',
  description: 'X2BEE MALL FO by Plateer',
  icons: {
    icon: '/favicon.ico',
  },
};

/favicon.ico는 기존에는 public 폴더를 봤지만 이제는 app 폴더를 본다.

참고: https://nextjs.org/docs/app/api-reference/functions/generate-metadata#basic-fields

위 링크에 가능한 field → colorScheme: 'dark', 도 가능

요즘 트렌드는 크롭 탭 상단 타이틀 란에 '소제목 | 홈페이지이름' 이렇게 표시해주는 트렌드다.

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

Folder structure & Naming conventions

어딜 구글링해봐도 폴더 구조에 대한 정답은 하나가 아니다.

취향이 많이 반영된다.

그래도 폴더 구조가 과거에 비해서 자유도가 조금 떨어져 난 다행이라고 생각.

두번째 고민은 Pascal case이니 Camel case이니 고민이다.

우선 folder이름으로 file-based routing이 가능하니, kebab case를 사용하는 url 방식을 따르는 것이 좋을 것 같다.

그리고 component이름은 대부분 PascalCase로 사용한다.

예전 Pages처럼 직전 url을 부여 안 해주는 composable 파일들은 component 폴더에 넣어놓는 게 좋을 것 같다.

이런 식으로

위와 같이 navbar를 만들고 app/layout.tsx에 import해서 다음과 같이 넣어준다.

그리고 이제부터 component별 코딩을 시작하면 된다.

const RootLayout = ({ children }: LayoutProps) => {
  return (
    <html lang="ko">
      <body>
        <HeaderNavbar />
        <main>{children}</main>
        <FooterNavbar />

Git repo

간단히 npx create-next-app 한 줄로 끝내도 될 것을 항목별로 나름 수동으로 세팅해보았다.

이제 깃에 올리고 코딩을 시작하면 된다.

$ git remote add origin [git 주소]
$ git remote -v
$ git add .
$ git commit -m 'next.js tech team template'
$ git push origin main

'Frontend (Next.js Tailwind Typescript) > Next.js' 카테고리의 다른 글

Headless E-commerce Storefront & Composable Commerce (1)	2023.11.22
Parallel Routes을 이용한 Modal 창 띄우기 (2)	2023.10.12
01-4. Create Next.js app (Tailwind CSS) (0)	2023.09.05
01-3. Create Next.js app (ESLint) (0)	2023.09.04
01-2. Create Next.js app (Typescript) (0)	2023.09.03