Next.js + TypeScript + Tailwind CSS 프로젝트 설정 절차

Next.js + TypeScript + Tailwind CSS 프로젝트 설정 절차를 요약했습니다.

0. 동작환경

node와 npm은 이미 설치되어 있다고 가정합니다.

$ node -v
v15.5.0

$ npm -v
7.3.0

또, 이번 기사는 macOS(Apple Silicon)에서 검증하고 있습니다.

$ uname -v
Darwin Kernel Version 20.2.0: Wed Dec  2 20:40:21 PST 2020; root:xnu-7195.60.75~1/RELEASE_ARM64_T8101

$ sw_vers
ProductName:    macOS
ProductVersion: 11.1
BuildVersion:   20C69

Intel판 macOS 및 Linux에서는 순서는 거의 같다고 생각합니다만, Windows 환경의 경우는 적절히 읽어 주시면 좋겠습니다.

1. Next.js 프로젝트 설정

먼저 create-next-app 명령을 사용하여 Next.js 템플릿에서 코드베이스를 만듭니다.

npx create-next-app nextjs-ts-tailwind-example --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/basics-final"

만약, 아래의 확인 메시지가 표시되면 그대로 Enter 키를 누르십시오.

Need to install the following packages:
  create-next-app
Ok to proceed? (y) [Enter]

로그 보기: Creating a new Next.js app ...

로그

Creating a new Next.js app in /Users/notakaos/git/notakaos/nextjs-ts-tailwind-example.

Downloading files from repo https://github.com/vercel/next-learn-starter/tree/master/basics-final. This might take a moment.

Installing packages. This might take a couple of minutes.


added 713 packages, and audited 714 packages in 29s

81 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Initialized a git repository.

Success! Created nextjs-ts-tailwind-example at /Users/notakaos/git/notakaos/nextjs-ts-tailwind-example
Inside that directory, you can run several commands:

  npm run dev
    Starts the development server.

  npm run build
    Builds the app for production.

  npm start
    Runs the built app in production mode.

We suggest that you begin by typing:

  cd nextjs-ts-tailwind-example
  npm run dev

명령이 완료되면 Next.js의 코드가 생성되었으므로 디렉토리를 이동하여 동작을 확인합니다.

nextjs-ts-tailwind-example

cd nextjs-ts-tailwind-example
npm run dev

브라우저에서 http://localhost:3000에 액세스하면 다음과 유사한 페이지가 표시됩니다.


[Your Name] 부분을 수정합니다. 좋아하는 편집기에서 components/layout.js 파일을 열고 여섯 번째 줄 주변의 [Your Name]를 원하는 이름으로 다시 씁니다.

components/layout.js

- const name = '[Your Name]'
+ const name = 'Taro`

재기록 후 파일을 저장하면 HMR(핫 모듈 리플레이스먼트)에 의해 자동으로 변경이 반영되어 브라우저의 표시가 바뀝니다.

이제 Next.js의 동작을 확인할 수 있었습니다.

계속하기 전에 npm run dev를 Control + C로 끝냅니다.

# npm run dev を実行しているターミナルにて
^C

2. TypeScript 도입

Next.js 프로젝트에 TypeScript를 도입하려면 빈 tsconfig.json을 준비합니다.

nextjs-ts-tailwind-example/

touch tsconfig.json

TypeScript를 이동하는 데 필요한 패키지를 설치합니다.

npm install --save-dev typescript @types/react @types/node

그런 다음 npm run dev를 실행합니다.

nextjs-ts-tailwind-example/

$ npm run dev
> [email protected] dev
> next dev

ready - started server on http://localhost:3000
We detected TypeScript in your project and created a tsconfig.json file for you.
...

Next.js가 빈 tsconfig.json를 감지하면 자동으로 다시 작성됩니다.
또한 next-env.d.ts라는 파일도 생성됩니다.

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

next-env.d.ts

/// <reference types="next" />
/// <reference types="next/types/global" />

npm run dev를 중지합니다.

^C

그런 다음 다음 리포지토리를 참조하여 다양한 js 파일을 ts 파일로 다시 작성합니다.

mv components/date.js components/date.tsx
mv components/layout.js components/layout.tsx
mv lib/posts.js lib/posts.ts
mv pages/_app.js pages/_app.tsx
mv pages/index.js pages/index.tsx
mv 'pages/posts/[id].js' 'pages/posts/[id].tsx'
mv pages/api/hello.js pages/api/hello.ts

다시 쓰면 동작을 확인합니다.

npm run dev

브라우저에서 동작 확인하고, 에러 없이 동작하면 OK입니다.

다음으로 진행합니다.

3. Tailwind CSS 도입

Next.js + TypeScript 프로젝트에 Tailwind CSS를 도입합니다.

이 페이지 참조하여 필요한 패키지를 설치합니다.

npm install tailwindcss@latest postcss@latest autoprefixer@latest

그런 다음 Tailwind CSS 구성 파일을 생성합니다.

npx tailwindcss init -p

그러면 tailwind.config.js와 postcss.config.js의 두 파일이 생성됩니다.

tailwind.config.js

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

불필요한 CSS를 삭제하기 위해 purge 설정을 수행합니다.

tailwind.config.js

  module.exports = {
-   purge: [],
+   purge: ['./components/**/*.tsx', './pages/**/*.tsx', './public/**/*.html'],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
  }

Tailwind CSS에서 생성된 CSS를 로드하려면 styles/global.css를 다시 씁니다.

styles/global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

이제 Tailwind CSS를 사용할 수 있습니다!

그리고는 여러가지 시행착오할 뿐!

참고문헌

TypeScript - Next.js

typescript-final - next-learn-starter

Install Tailwind CSS with Next.js - Tailwind CSS