Next.js + TypeScript + Tailwind CSS 프로젝트의 환경 구축 절차

Next.js + TypeScript + Tailwind CSS 프로젝트의 환경 구축 절차를 정리했습니다.

소개

node와 npm은 설치가 끝난 것으로 가정합니다.

운영 환경

node -v
v15.7.0

npm -v
7.4.3

또한이 기사의 내용은 macOS (Apple Silicon)에서 실행됩니다.
Windows를 이용하시는 분은 적당히 읽어 주시면 좋겠습니다.

1.Next.js 프로젝트 만들기

Next.js 프로젝트 만들기 (폴더가 생성되므로 작업 디렉토리 바로 아래에서 수행)

npx create-next-app

- What is your project named?

그리고 프로젝트 이름을 듣기 때문에 어떤 프로젝트 이름을 입력합니다. 이번은 next-sample 이라고 합니다.

그러면 입력한 이름의 폴더가 만들어집니다.

로컬 서버를 시작합니다.

// 作成したプロジェクトへ移動
cd next-sample

npm run dev

브라우저에서 http://localhost:3000으로 이동하여 다음 화면이 나타나면 Next.js 준비가 완료됩니다!

2.TypeScript 도입

필요한 패키지를 설치합니다.

npm i -D typescript @types/react @types/node

원래 생성된 pages/ 다음 js 파일을 ts 파일로 다시 씁니다.

mv pages/_app.js pages/_app.tsx
mv pages/index.js pages/index.tsx

tsconfig.json 는 npm run dev 그러면 자동으로 만들어지므로 준비할 필요가 없습니다.
npm run dev를 다시 실행하여 Next.js를 설치할 때 확인한 화면이 나타나면 TypeScript 배포가 완료됩니다.

3.Tailwind CSS 도입

여기 공식 페이지를 참조하여 Tailwind CSS 설치

npm i -D tailwindcss@latest postcss@latest autoprefixer@latest

그런 다음 구성 파일 만들기

npx tailwindcss init -p

실행하면 tailwind.config.js 및 postcss.config.js가 생성됩니다.
tailwind.config.js 의 purge 를 설정합니다.

tailwind.config.js

 module.exports = {
-   purge: [],  // この行を削除
+   purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'], // この行を追加
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
  }

styles/globals.css 의 내용을 다시 씁니다.

styles/globals.css

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

이것으로 Tailwind CSS의 준비도 완료됩니다!

그리고는 ./pages/index.tsx 의 className 에 준비되어 있는 유틸리티 클래스 를 설정해, 적용되면 동작 확인도 완료입니다!

pages/index.js

<h1 className="text-red-400  text-5xl">
  Welcome to <a href="https://nextjs.org">Next.js!</a>
</h1>

참고문헌

Install Tailwind CSS with Next.js

Tailwind CSS Cheat Sheet