Updated: 2023-03-09
최신 Next.js 13에 맞춰 문서를 업데이트
요즘 Next.js 가 엄청 재미있다. 그래서 작은 프로젝트 하나 한땀한땀 만들어가면서 반복적인 내용들을 잊어먹지 않도록 정리해보려고 한다. 대충 아래 내용들을 하나씩 해나가며 정리해보려 한다.
- 프로젝트 설정: TypeScript, ESLint, Prettier 설정
- MongoDB 연결
- Session 인증 구현
우선 첫번째는 프로젝트 설정이다.
Next.js 프로젝트 시작하기
프로젝트 폴더를 미리 만들지 말고, 프로젝트 폴더가 생성될 부모 폴더에서 다음 명령어를 실행해주자.
npx create-next-app@latest --typescriptnpx 로 create-next-app 을 설치할 것이냐고 물어본 후, y 를 입력하면, 프로젝트 이름을 입력하라고 한다. 이 때 입력한 프로젝트 이름으로 폴더를 생성하고, 그 안에 프로젝트를 설치한다.
이제는 단순히 프로젝트 이름 외에도 기본 설정으로 묻는 것이 많아졌다. 우선 ESLint 사용 여부를 묻고, src 폴더를 쓸 것인지 묻는다. 그리고 13에서 새로 추가된 app 폴더 사용 여부를 묻고, 마지막으로 @/* 에 대해 alias 를 쓸 것인지 묻는다. 특히 마지막이 아주 편한데, 덕분에 추가 설정 없이 상대 경로 대신 절대경로를 바로 쓸 수 있다. 특히 @ 로 시작하는게, Sveltekit 에서 ./src/lib 폴더를 @lib 로 자동 매핑 해주는 느낌을 주어서 재밌다.
나는 개인적으로 다음과 같이 사용한다.
- ESLint: Yes
src/사용: Noapp/사용: No (현재 안되는게 많다. 특히 최근 버전에서 TailwindCSS 가 Firefox, Safari에서 Hot Reload 가 안되는 문제가 있다. 난 Chrome 에서도 간헐적으로 Hot Reload 가 안된다.)@/*사용: YEs
npx create-next-app@latest --typescript
✔ What is your project named? … my-app
✔ Would you like to use ESLint with this project? … No / Yes
✔ Would you like to use `src/` directory with this project? … No / Yes
✔ Would you like to use experimental `app/` directory with this project? … No / Yes
✔ What import alias would you like configured? … @/*
Creating a new Next.js app in /Users/byron1st/Workspace/personal-projects/my-app.
Using npm.
Initializing project with template: default
Installing dependencies:
- react
- react-dom
- next
- typescript
- @types/react
- @types/node
- @types/react-dom
- eslint
- eslint-config-next
added 270 packages, and audited 271 packages in 5s
102 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
Initialized a git repository.
Success! Created my-app at /Users/byron1st/Workspace/personal-projects/my-applocalhost:3000 을 브라우저로 접속하면 아래와 같이 뜬다.
13 버전에서 엄청 멋있어졌다. 역시 디자인의 Vercel..!!
ESLint 설정
13 버전부터 ESLint 를 위해 추가로 설정해줄 것은 없다.
Prettier 설정
난 Prettier 를 ESLint 로 통합해서 사용한다. 그래서 VSCode 의 경우 ESLint 플러그인만 설치해서 사용하고, WebStorm 의 경우, "저장 시 eslint --fix 실행" 옵션을 키고 Prettier 설정은 따로 하지 않는다.
이제 Prettier 를 설치해보자.
npm install -D eslint-config-prettier eslint-plugin-prettier prettiereslint-config-prettier 는 다른 eslint 규칙들 중, Prettier 와 겹치는 규칙들을 비활성화해준다. 그리고 eslint-plugin-prettier eslint 를 실행할 때 Prettier 를 대신 실행해준다.
이제 eslint 설정 파일에 Prettier 설정을 추가해준다. 앞 단계에서 next lint는 .eslint.json 파일을 자동으로 생성하고, 아래와 같은 기본설정을 생성한다.
{
"extends": "next/core-web-vitals"
}extends 항목을 배열로 바꾸고 아래와 같이 변경한다.
{
"extends": [
"next/core-web-vitals",
"plugin:prettier/recommended"
]
}참고로 plugin:prettier/recommended 는 항상 반드시 배열 마지막에 와야 한다.
이제 .prettierrc 파일을 생성하여, Prettier 설정을 추가해주자. 내가 개인적으로 쓰는 Prettier 설정은 다음과 같다.
{
"semi": false,
"singleQuote": true,
"trailingComma": "all"
}TypeScript 설정
과거 TypeScript 는 TSLint 를 통해 린팅을 했었다. 하지만 이제는 ESLint 로 통합되었고, @typescript-eslint 프로젝트들을 통해 구현된다. 아래 명령어로 설치해주자.
npm install -D @typescript-eslint/eslint-plugin @typescript-eslint/parserParser 는 ESlint가 TypeScript 코드를 파싱할 수 있도록 해주고, plugin TypeScript 특화된 규칙들을 추가해준다.
이제 .eslint.json 파일을 다음과 같이 변경해주자.
{
"parser": "@typescript-eslint/parser",
"extends": [
"next/core-web-vitals",
"plugin:@typescript-eslint/recommended",
"plugin:prettier/recommended"
]
}이제 린트 관련 설정은 모두 끝났다. 추가로 import 경로 관련 설정을 하고 싶다면 아래 내용도 진행하도록 하자.
baseURL 추가
@/* 경로 alias 를 사용하기 때문에 이제 별도의 baseURL 설정은 필요 없다.
TailwindCSS 설정
난 이제 대부분의 개인 프로젝트에서 TailwindCSS를 사용한다. 나의 비루한 CSS 실력 탓에 TailwindCSS 는 구원자나 다름없다.
TailwindCSS 설치는 공식 가이드에 매우 잘 되어 있으니, 공식 가이드를 참고하여 진행하자.
위의 공식 가이드대로 진행하면서, 이제 멋진 (하지만 불필요한) 기본 디자인은 제거해주고, Hello World 만 남겨놓자.
// pages/index.tsx
export default function Home() {
return (
<>
<main>
<p>Hello, World</p>
</main>
</>
)
}
// pages/_app.tsx
import type { AppProps } from 'next/app'
import Head from 'next/head'
import '@/styles/globals.css'
export default function App({ Component, pageProps }: AppProps) {
return (
<>
<Head>
<title>My App</title>
<meta name="description" content="My personal website" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
</Head>
<Component {...pageProps} />
</>
)
}@tailwind base;
@tailwind components;
@tailwind utilities;
* {
margin: 0;
}그리고 Hello, World 텍스트에 TailwindCSS 클래스 이름을 입력하여, 제대로 설치되었는지 확인하자.
// pages/index.tsx
<p className="text-3xl font-bold">Hello, World</p>
잘 되었다.
tailwind를 위한 ESLint/Prettier 설정
TailwindCSS 클래스 이름들을 자동으로 정렬해주는 "공식" Prettier 플러그인이 있다. 그리고 이걸 또 ESLint 로 연결시켜주는 플러그인도 있다. 이 둘을 설치해보자.
npm install -D eslint-plugin-tailwindcss prettier-plugin-tailwindcss그리고 .eslintrc.json 파일을 다음과 같이 수정한다.
{
"parser": "@typescript-eslint/parser",
"extends": [
"next/core-web-vitals",
"plugin:@typescript-eslint/recommended",
"plugin:prettier/recommended",
"plugin:tailwindcss/recommended"
]
}그러면 이제 TailwindCSS 의 클래스 이름들도 일관된 규칙을 따라 정렬해주게 된다.
이상 모든 프로젝트 설정이 끝났다.
