Next.js & Tailwind CSS 입문

Next.js의 입문편을 정리해 보았습니다.

Next.js는 어쨌든 서버 측에서 실행되는 ReactJS입니다.
이것을 기억하면 서버 사이드도 프런트 엔드도 React의 느낌으로 쓸 수 있을 것 같습니다.

여기의 공식 문서를 참고로 했습니다.
htps // // 네 xtjs. 오 rg / 두 cs /

React Project 만들기

먼저 yarn에서 React 프로젝트를 만듭니다.
프로젝트 이름은 기본 my-app이었습니다.

$ yarn create next-app
yarn create v1.22.10
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...

success Installed "[email protected]" with binaries:
      - create-next-app
✔ What is your project named? … my-app
(node:15206) ExperimentalWarning: The fs.promises API is experimental
Creating a new Next.js app in /Users/araya/Repository/my-app.

Installing react, react-dom, and next using yarn...
...
...
...

다음 설치

만든 프로젝트 내에서 yarn을 사용하여 다음을 설치합니다.

$ cd my-app
$ yarn add next react react-dom
yarn add v1.22.10
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved 3 new dependencies.
info Direct dependencies
├─ [email protected]
├─ [email protected]
└─ [email protected]
info All dependencies
├─ [email protected]
├─ [email protected]
└─ [email protected]
✨  Done in 2.48s.

개발 서버 시작

일단 이것으로 빈 사이트를 볼 수 있게 됩니다.
npx는 npm으로 설치한 node_module 이하에 설치한 패키지를 이용하는 명령입니다.
개발 서버에 대한 dev입니다.

$ npx next dev

브라우저에서 http://localhost:3000/로 이동합니다.

Typescript 소개

일단 서버를 멈추고 Typescript를 도입합니다.
tsconfig.json을 만들면 next가 자동으로 작성됩니다.

$ yarn add --dev typescript @types/react @types/node
$ touch tsconfig.json
$ npx next dev

페이지 만들기

간단한 페이지를 만드십시오.
Vim 명령이 아닌 VSCode 등에서도 괜찮습니다. 즉시 Typescript(.tsx)를 사용해 보겠습니다.

vim pages/about.tsx

about.tsx의 내용은 아래와 같이 합니다.

about.tsx

function About() {
  return <div>About</div>
}

export default About

about.tsx를 저장 한 후 서버를 다시 시작하고,
http://localhost:3000/about
방문하면 간단히 About으로 표시된 페이지가 나타납니다.

$ npx next dev                                                                                                                          
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
(node:16094) ExperimentalWarning: The fs.promises API is experimental
event - compiled successfully
event - build page: /about
wait  - compiling...
event - compiled successfully

Tailwind CSS 도입

공식 문서에서 살고 있으므로 Tailwind CSS를 사용해 보겠습니다. 궁합이 좋은 것일까.

설치한 후 About.tsx에 간단한 버튼을 설치해 봅니다.
그건 그렇고, node 버전이 v12 이상이 아니면 오류가 발생하는 것 같습니다.

$ npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

$ npx tailwindcss init -p # 設定ファイルの作成

그런 다음 순서대로 파일을 수정합니다.

$ vim tailwind.config.js
$ vim postcss.config.js
$ vim styles/globals.css
$ vim pages/about.tsx

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: {},
  },
}

globals.css

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

about.tsx

function About() {
  return <div>
    About
    <button className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded select-none">
      Button
    </button>
  </div>
}

export default About

마지막으로 서버를 다시 시작하면 tailwindcss의 외형 버튼이 표시됩니다.

$ npx next dev