freejak5520/nextjs-template

Organize the repetitive processes involved in setting up a Next.js project.

Next.js template

Next.js 프로젝트를 생성할 때 반복적으로 설정이 필요한 과정을 정리합니다.

아래의 라이브러리, 프레임워크가 포함되어 있습니다.

• Next.js: 14.2.3
• TypeScript: ^5
• TailwindCSS: ^3.4.1
• Prettier: ^8
• Jest: ^29.7.0
• Storybook: ^8.1.3
• eslint: ^8
  • eslint-config-next: 14.2.3
  • eslint-plugin-prettier: ^5.1.3
  • eslint-config-prettier: ^9.1.0
  • eslint-plugin-storybook: ^0.8.0

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

create-next-app을 사용해서 프로젝트 생성

# npx create-next-app@latest <project-directory> --ts --tailwind --eslint --app --src-dir --use-npm --no-import-alias
npx create-next-app@latest nextjs-template --ts --tailwind --eslint --app --src-dir --use-npm --no-import-alias

cd nextjs-template

개발 서버 실행

npm run dev

http://localhost:3000/ 로 접속

2. TS Config 적용

tsconfig.json에 권장 설정을 적용합니다.

https://velog.io/@freejak5520/번역The-TSConfig-Cheet-Sheet

{
  "compilerOptions": {
    "allowJs": true,
    "esModuleInterop": true,
    "incremental": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "module": "esnext",
    "moduleDetection": "force",
    "moduleResolution": "bundler",
    "noEmit": true,
    "noImplicitOverride": true,
    "noUncheckedIndexedAccess": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "strict": true,
    "verbatimModuleSyntax": true,
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "paths": {
      "@/*": [
        "./src/*"
      ]
    },
    "plugins": [
      {
        "name": "next"
      }
    ],
  },
  "exclude": [
    "node_modules",
  ],
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts",
  ]
}

3. tsc 스크립트 추가

tsc 명령어를 자주 사용하기 때문에 스크립트에 추가합니다.

{
  // ...
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "tsc": "tsc" // Add tsc script
  },
  // ...
}

사용 예: tsc —watch 실행

npm run tsc -- -w

4. Prettier

Prettier와 관련 플러그인을 설치하고 rule 설정을 통해 save 시 자동 포매팅을 적용합니다.

Prettier 및 eslint, tailwindcss 관련 플러그인 설치

npm install -D prettier eslint-config-prettier eslint-plugin-prettier prettier-plugin-tailwindcss

.prettierrc 파일 추가

{
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": false,
  "quoteProps": "as-needed",
  "trailingComma": "all",
  "bracketSpacing": true,
  "bracketSameLine": false,
  "arrowParens": "always",
  "printWidth": 80,
  "endOfLine": "lf",
  "plugins": ["prettier-plugin-tailwindcss"]
}

eslint 설정 eslintrc.json

{
  "extends": [
    "next/core-web-vitals",
    "plugin:prettier/recommended"
  ],
  "rules": {
    "prettier/prettier": [
      "error"
    ]
  }
}

VS Code 설정

• ESLint 확장 설치
• 설정에 아래 내용 추가해서 저장 시 format on save 적용

{
  // ...
  "[javascript]": {
      "editor.codeActionsOnSave": {
          "source.fixAll": "always"
      }
  },
  "[javascriptreact]": {
      "editor.codeActionsOnSave": {
          "source.fixAll": "always"
      }
  },
  "[typescript]": {
      "editor.codeActionsOnSave": {
          "source.fixAll": "always"
      }
  },
  "[typescriptreact]": {
      "editor.codeActionsOnSave": {
          "source.fixAll": "always"
      }
  },
  // ...
}

JavaScript, TypeScript 외 파일들은 VS Code Prettier 확장을 사용해 적용합니다.

5. Jest

https://nextjs.org/docs/app/building-your-application/testing/jest

테스트라이브러리로 jest를 설치하고 설정합니다.

install jest

npm install -D jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom @types/jest

init jest

npm init jest@latest

Create jest.config.js

const nextJest = require("next/jest");

/** @type {import('jest').Config} */
const createJestConfig = nextJest({
  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
  dir: "./",
});

// Add any custom config to be passed to Jest
const config = {
  coverageProvider: "v8",
  testEnvironment: "jsdom",
  // Add more setup options before each test is run
  // setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
};

// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
module.exports = createJestConfig(config);

6. Storybook

https://storybook.js.org/docs/get-started

Install

npx storybook@latest init

.storybook/preview.ts TailwindCSS 추가

import "@/app/globals.css"

사용하지 않는 애드온 및 예제 파일 제거

package.json 에서 제거

  "@chromatic-com/storybook": "^1.4.0",
  "@storybook/addon-onboarding": "^8.1.3",
  "@storybook/addon-links": "^8.1.3",

.storybook/main.ts 에서 애드온 제거

"@storybook/addon-onboarding",
"@storybook/addon-links",
"@chromatic-com/storybook",

src/stories 디렉토리 제거