Next.js 튜토리얼 - ch1 ~ 2. 프로젝트 기본 설정

Learn Next.js 튜토리얼
https://nextjs.org/learn/dashboard-app/getting-started

Next.js 튜토리얼 - ch1 ~ 2. 프로젝트 기본 설정

프로젝트 받기

npm install -g pnpm // 패키지 매니저로 pnpm 설치해 사용. 더 빠르고 효율적임
npx create-next-app@latest nextjs-dashboard --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example" --use-pnpm
// next 프로젝트 생성 명령어. --example 옵션 뒤에 기존 프로젝트의 깃허브 주소를 주어서 clone 해옴.

cd nextjs-dashboard // 생성된 프로젝트로 이동

프리티어 설정

pnpm install -D prettier prettier-plugin-tailwindcss // 프리티어, 프리티어+테일윈드 플러그인 설치
pnpm i // 프로젝트에 필요한 모든 의존성 패키지 설치

// .prettierrc 
// 파일 생성 후 다음 내용을 저장.

{
  "printWidth": 100,
  "tabWidth": 2,
  "trailingComma": "all",
  "singleQuote": true,
  "jsxSingleQuote": true,
  "semi": false,
  "plugins": ["prettier-plugin-tailwindcss"]
}

프리티어 설정은 입맛대로 할 수 있지만, 위와 같이 설정해주었다.

npx prettier . --write // 초기 한 번 적용. 이후 저장 시마다 프리티어 적용됨

package.json

다음은 package.json에 설정된 모든 의존성 이름 및 버전이다.

{
  "private": true,
  "scripts": {
    "build": "next build",  
    "dev": "next dev --turbo",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@heroicons/react": "^2.1.4",
    "@tailwindcss/forms": "^0.5.7",
    "@vercel/postgres": "^0.8.0",
    "autoprefixer": "10.4.19",
    "bcrypt": "^5.1.1",
    "clsx": "^2.1.1",
    "next": "15.0.3-canary.7",
    "next-auth": "5.0.0-beta.19",
    "postcss": "8.4.38",
    "react": "19.0.0-rc-cd22717c-20241013",
    "react-dom": "19.0.0-rc-cd22717c-20241013",
    "tailwindcss": "3.4.4",
    "typescript": "5.5.2",
    "use-debounce": "^10.0.4",
    "zod": "^3.23.8"
  },
  "devDependencies": {
    "@types/bcrypt": "^5.0.2",
    "@types/node": "20.14.8",
    "@types/react": "npm:types-react@19.0.0-rc.1",
    "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1",
    "eslint": "^9",
    "eslint-config-next": "15.0.3",
    "prettier": "^3.3.3",
    "prettier-plugin-tailwindcss": "^0.6.8"
  },
  "pnpm": {
    "overrides": {
      "@types/react": "npm:types-react@19.0.0-rc.1",
      "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1"
    }
  }
}

개발 서버 구동

pnpm dev

CSS Styling

Global Style

/app/ui 디렉토리 하위에 global.css라는 전역 css 파일이 존재한다. 이 css는 애플리케이션 전역에 적용될 수 있다.
애플리케이션의 어떤 컴포넌트에서든 해당 파일을 import할 수 있지만, 가능한 상위 컴포넌트에서 import하는 것이 추천된다.

// /app/layout.tsx에 global css 파일 import

import '@/app/ui/global.css';

global.css 파일에는 @tailwind 지시문들이 포함되어 있다. 이를 통해 tailwind css를 전역적으로 사용할 수 있다.

@import 'tailwindcss/base'; // 테일윈드 기본 스타일
@import 'tailwindcss/components'; // 테일윈드 컴포넌트 스타일
@import 'tailwindcss/utilities'; // 테일윈드 유틸리티 클래스

CSS Module

css module을 사용하여 css 충돌을 방지하고 고유한 css 스타일을 적용할 수 있다.

css module들은 먼저 /app/ui 하위에서 파일명.module.css 라는 명명 규칙으로 만들 수 있다.
모듈 파일 내부에서 클래스명에 대한 스타일들을 설정하게 되는데, 만약 서로 다른 모듈 안에 있는 클래스명이 동일하더라도 충돌이 발생하지 않는다. 이는 css module 사용 시 모듈 내 클래스명들이 충돌을 방지하도록 자동으로 고유화되기 때문이다.
[파일명]__[클래스명]__[랜덤 해시]와 같은 식으로 고유화 되기 때문에, 스타일이 다른 컴포넌트와 겹치지 않도록 보장할 수 있다.

import AcmeLogo from '@/app/ui/acme-logo';
import { ArrowRightIcon } from '@heroicons/react/24/outline';
import Link from 'next/link';
import styles from '@/app/ui/home.module.css';

export default function Page() {
  return (
    <main className="flex min-h-screen flex-col p-6">
      <div className={styles.shape} />
    // ...
  )
}

위 코드에서 '@/app/ui/home.module.css'에 있는 css module을 styles라는 이름으로 받아와서, css module 내부에 있는 스타일에 .을 사용하여 필드처럼 접근하고 있다.

clsx 라이브러리

여러 클래스를 동적으로 적용하고 싶은 경우에, clsx 라이브러리를 사용할 수 있다.
여러 클래스명들을 콤마로 이어서 추가 가능하며, 참(자바스크립트의 not falsy value)일 경우에만 클래스명을 추가한다.

import clsx from 'clsx';

export default function InvoiceStatus({ status }: { status: string }) {
  return (
    <span
      className={clsx(
        'inline-flex items-center rounded-full px-2 py-1 text-sm',
        {
          'bg-gray-100 text-gray-500': status === 'pending',
          'bg-green-500 text-white': status === 'paid',
        },
      )}
    >
    // ...
)}

위 코드에서는 clsx 라이브러리를 사용해 status에 따라서 동적으로 class를 추가하고 있다.
객체 형식인 경우에는, key에 대한 value가 참일 경우 key를 적용한다.