Next.js 설치 (Next.js Installation)

Next.js 애플리케이션 설치 및 초기 환경 설정 방법을 안내한다.

시스템 요구 사항

Node.js 18.18+
macOS, Windows (WSL 포함), Linux

자동 설치

새 Next.js 앱 생성 시 create-next-app CLI를 사용한다. 터미널에서 다음 명령어를 실행한다.

npx create-next-app@latest

설치 중 프로젝트 이름, TypeScript, ESLint, Tailwind CSS, App Router, 임포트 별칭 설정 등 질문에 응답한다.

수동 설치

필수 패키지를 설치한다.

pnpm i next@latest react@latest react-dom@latest

또는 npm, yarn, bun 등 선호하는 패키지 매니저를 사용한다.

package.json에 다음 스크립트를 추가한다.

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

`app` 디렉터리 생성

파일 시스템 라우팅을 위해 프로젝트 루트에 app 폴더를 생성한다. 그 안에 루트 레이아웃 파일인 layout.tsx를 생성한다.

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

홈 페이지 app/page.tsx를 생성한다.

export default function Page() {
  return <h1>Hello, Next.js!</h1>
}

`public` 폴더 생성 (선택 사항)

정적 자산 저장용으로, 프로젝트 루트에 public 폴더를 생성한다. 예: public/profile.png는 /profile.png로 참조한다.

개발 서버 실행

npm run dev 실행.
http://localhost:3000 접속.
app/page.tsx 수정 후 결과 확인.

TypeScript 설정

파일을 .ts 또는 .tsx로 변경하고 next dev를 실행하여 자동 설정을 진행한다. VS Code에서는 명령 팔레트(Ctrl/⌘ + Shift + P)에서 "TypeScript: Select TypeScript Version" 후 "Use Workspace Version" 선택으로 플러그인을 활성화한다.

ESLint 설정

package.json에 "lint": "next lint" 스크립트를 추가 후 npm run lint를 실행하여 설치 및 구성 질문에 답한다.

절대 경로 및 모듈 경로 별칭 설정

tsconfig.json 또는 jsconfig.json 파일에 "baseUrl" 및 "paths" 옵션을 추가하여 모듈 임포트를 간소화한다.

{
  "compilerOptions": {
    "baseUrl": "src/",
    "paths": {
      "@/styles/*": ["styles/*"],
      "@/components/*": ["components/*"]
    }
  }
}

각 "paths"는 baseUrl을 기준으로 한다.

HiClover

이 블로그 검색