Next.js + Typescript + Tailwind CSS 초기세팅하기

  • CloneCoding
  • 2022년 10월 24일

Next.js는 서버 사이드 렌더링(SSR)이 가능한 React.js 프레임 워크이다. 클라이언트 사이드 렌더링(CSR)의 경우 사용자는 모든 자바스크립트 파일을 로드하고 렌더링이 될 때까지 대기해야 하는 단점이 있는반면 SSR은 서버에서 자바스크립트를 로딩하여 클라이언트에서 로딩하는 시간을 줄여준다. 이와함께 검색엔진이 사이트를 스캔할 때 CSR은 자바스크립트가 로드되긴전 사이트 내용을 스캔하는 반면 SSR은 사이트의 모든 내용을 스캔하여 SEO 측면 더 유리하다.

 

Typescript는 자바스크립트를 기반으로 정적 타입 문법을 추가한 프로그래밍 언어이다. 

 

Tailwind는 CSS프레임 워크로 Bootstrap와 같은 CSS 프레임워크와 달리 컴포넌트 형식의 디자인 대신 이미 정의된 유틸리티 클래스를 통하여 디자인을 구성할 수 있다.

 

Next.js + Typescript + Tailwind로 구성된 프로젝트를 세팅하는 방법을 알아본다.

 

프로젝트 생성

npx create-next-app --typescript

# 프로젝트 이름 설정
? What is your project named? › '프로젝트 이름'

Eslint 및 prettier 설정

npm install -D eslint prettier eslint-plugin-prettier eslint-config-prettier eslint-plugin-import eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-react-app eslint-plugin-simple-import-sort

프로젝트 루트/.eslintrc.json 파일이 없으면 생성한다.

# .eslintrc.json

{
  "extends": ["next/core-web-vitals", "react-app", "prettier/prettier"],
  "plugins": ["react-hooks", "simple-import-sort", "prettier"],
  "rules": {
    "prettier/prettier": "error",
    "react-hooks/rules-of-hooks": "error",
    "simple-import-sort/imports": "error",
    "simple-import-sort/exports": "error",
    "no-multiple-empty-lines": ["error", { "max": 1, "maxEOF": 0 }],
    "comma-dangle": ["error", "always-multiline"],
    "object-curly-spacing": ["error", "always"],
    "space-in-parens": ["error", "never"],
    "computed-property-spacing": ["error", "never"],
    "comma-spacing": ["error", { "before": false, "after": true }],
    "eol-last": ["error", "always"],
    "quotes": ["error", "single"],
    "no-tabs": "error",
    "semi": ["error", "never"],
    "import/no-anonymous-default-export": 0,
    "object-shorthand": "error",
    "padding-line-between-statements": [
      "error",
      { "blankLine": "always", "prev": "*", "next": "return" }
    ],
    "@typescript-eslint/no-redeclare": 0
  }
}

프로젝트 루트/.prettierrc 파일이 없으면 생성한다.

# .prettierrc

{
    "printWidth": 80,
    "semi": true,
    "singleQuote": true,
    "trailingComma": "all",
    "tabWidth": 2,
    "bracketSpacing": true,
    "endOfLine": "auto",
    "useTabs": false
}

 

Tailwind CSS 설치

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

프로젝트 루트/postcss.config.js 파일이 없으면 생성한다.

# postcss.config.js

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

tailwind.config.js 파일 수정

# tailwind.config.js
# purge 및 content는 프로젝트에 사용되는 자바스크립트 파일 경로를 기입한다.

/** @type {import('tailwindcss').Config} */
module.exports = {
  purge: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}"
  ],
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

프로젝트 루트/styles/globals.css 에 아래 내용을 추가한다.

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

h1 {
 @apply text-3xl font-bold underline
}

프로젝트 세팅 상태 확인

index.tsx를 아래와 같이 수정.

import type { NextPage } from 'next'

const Home: NextPage = () => {
  return (
    <div>
      <h1>Hello world!</h1>
    </div>
  )
}

export default Home

프로젝트 실행

npm run dev;

styled-jsx에서 Tailwind 사용하기

아래와 같이 styled-jsx에서 @apply를 사용하면 CSS가 적용되지 않는다.

import type { NextPage } from 'next'

const Home: NextPage = () => {
  return (
    <>
    <div>
      <h1>Hello world!</h1>
    </div>
    <style jsx>{`
        h1 {
          @apply text-4xl font-bold underline;
        }
        `}</style>
    
    </>
  )
}

export default Home

이럴땐 styled-jsx-plugin-postcss를 설치한다.

npm install -D styled-jsx-plugin-postcss

프로젝트 루트/.babelrc 파일을 생성한다.

# .babelrc

{
  "presets": [
    [
      "next/babel",
      {
        "styled-jsx": {
          "plugins": ["styled-jsx-plugin-postcss"]
        }
      }
    ]
  ]
}

다시 프로젝트를 실행하면 정상적으로 Tailwind를 styled-jsx에 이용할 수 있다.

© Copyright 2023 CLONE CODING