[Next.js] shadcn/ui를 곁들인 Next.js 설치

Natest·2023년 10월 27일

Next.js에 대한 것

목록 보기

3/5

1. Create project

Start by creating a new Next.js project using create-next-app:

npx create-next-app@latest my-app --typescript --tailwind --eslint

my-app 부분에 본인의 프로젝트 이름을 입력하면 됩니다.

명령어를 입력하면 세부 옵션을 설정 해주어야 하는데 개인이 원하는 방향으로 설정하면 되겠습니다.

2. Run the CLI

Run the shadcn-ui init command to setup your project:

npx shadcn-ui@latest init

shadcn-ui를 설치하면 프로젝트에 넣고 싶은 ui를 components에서 찾아서 설치해서 사용할 수 있습니다.

명령어를 입력하면 마찬가지로 세부옵션을 선택해야 하는데 이 부분도 개인이 원하는 방향으로 설정하면 되겠습니다.

이후에 npm run dev를 실행 해서 잘 설치되었나 확인하여줍니다.

그리고 app폴더의 globals.css코드에

html,body:root{
	height:100%;
}

html, body, :root 선택자에 대해 높이(height)를 100%로 설정하여 뷰포트(viewport) 높이와 동일한 높이를 가진 컨테이너를 만들거나, 뷰포트를 초과하는 내용을 스크롤 없이 보여주도록 설정합니다.

ESlint & Prettier & husky 설치

npm install -D prettier eslint-config-prettier eslint-config-standard eslint-plugin-react lint-staged husky

eslint는 처음 설치할 때 같이 설치 되었으므로 prettier와 husky 그리고 eslint의 부수적인 라이브러리를 설치하여 사용이 더 용이하게 만들 수 있습니다.

ESlint 파일 설정

ESlint 설정은 상황에 따라 달라지므로 본인이 원하는 방향으로 설정하면 됩니다.

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": ["next/core-web-vitals", "plugin:react/recommended", "standard", "prettier"],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["react", "@typescript-eslint"],
  "rules": {
    "react/jsx-uses-react": "off",
    "react/react-in-jsx-scope": "off",
    "camelcase": "off"
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "root": true
}

.eslintignore파일을 사용해서 ESLint가 특정 파일이나 디렉토리를 린팅(linting) 과정에서 무시하도록 설정하는 데 사용할 수 있습니다.

.next
next-env.d.ts
node_modules
yarn.lock
package-lock.json
public
ui

prettier 설정

prettier도 상황에 따라 설정이 다르니 본인이 원하는 방향으로 설정하면 됩니다.

module.exports = {
  tabWidth: 2,
  semi: true,
  singleQuote: true,
  printWidth: 80,
  arrowParens: 'avoid',
};

.prettierignore파일을 사용해서 Prettier가 특정 파일이나 디렉토리를 포맷팅 과정에서 무시하도록 설정하는 데 사용할 수 있습니다.

.next
next-env.d.ts
node_modules
yarn.lock
package-lock.json
public
**/*.prisma
.prettierignore

Husky설정

Husky를 사용하면 커밋(commit) 또는 푸시(push)하기 전에 린트(lint), 테스트, 빌드, 포맷팅 등의 작업을 자동으로 실행할 수 있습니다. 이를 통해 코드 품질을 보장하고, 버그를 미리 찾아낼 수 있습니다.

npx husky-init && npm install       # npm

설치하면 package.json이 수정되고, husky가 설치됩니다.

프로젝트의 root폴더에 .husky폴더를 만들고 안에 pre-commit이라는 파일이 생성될 것입니다.

pre-commit이라는 파일에 명령어를 입력합니다.

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx lint-staged

이렇게 하면 Git 커밋 시점에 lint-staged를 통해 린팅(linting) 작업이 이루어집니다.

그리고 package.json파일에 설정을 합니다.

  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{ts,tsx}": [
      "eslint --fix"
    ],
    "*": [
      "prettier --write"
    ],
    "app/**/*.{ts,tsx}": []
  }

이 설정으로 인해, Git 커밋을 하기 전에 .ts 또는 .tsx 파일은 ESLint를 통해 린팅이 되고, 그 외의 모든 파일은 Prettier를 통해 포맷팅이 됩니다. 그리고 app 디렉토리 아래의 .ts, .tsx 파일은 이러한 작업에서 제외됩니다. 이를 통해 코드 품질을 보장하고, 일관성 있는 코드 스타일을 유지하는 데 도움을 줍니다.