ReactNextCentral

Next.js 설치

Published on
create-next-app을 사용하여 새로운 Next.js 애플리케이션을 만들고 타입스크립트, 스타일 및 next.config.js 파일 설정하는 법을 알아봅니다.
Table of Contents

시스템 요구사항

  • Node.js 16.14 이상 버전 설치가 필요합니다.
  • macOS, Windows (WSL 포함), Linux가 지원됩니다.

create-next-app을 사용한 자동 설치 방법

create-next-app을 사용하여 새로운 Next.js 애플리케이션을 시작하는 것을 추천합니다. 이는 자동으로 모든 것을 설정해 줍니다. 프로젝트를 만들려면 다음을 실행하세요.

터미널
$ npx create-next-app@latest

설치 시 다음과 같은 프롬프트가 표시됩니다.

✔ What is your project named? … boilerplate
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias? … No / Yes
✔ What import alias would you like configured? … @/*

한글로 번역하면 아래와 같습니다.

프로젝트의 이름은 무엇인가요? my-app
타입스크립트를 사용하시겠습니까? 아니요 / 예
ESLint를 사용하시겠습니까? 아니요 / 예
Tailwind CSS를 사용하시겠습니까? 아니요 / 예
`src/` 디렉터리를 사용하시겠습니까? 아니요 / 예
앱 라우터를 사용하시겠습니까? (추천) 아니요 / 예
기본 가져오기 별칭을 사용자 정의하시겠습니까? 아니요 / 예
어떤 가져오기 별칭을 설정하시겠습니까? @/*

위의 모든 프롬프트를 실행하면 create-next-app은 프로젝트 이름의 폴더를 생성하고 필요한 의존성을 설치합니다.

수동 설치 방법

새로운 Next.js 앱을 수동으로 만들려면 필요한 패키지를 먼저 설치하세요.

터미널
$ npm install next@latest react@latest react-dom@latest

package.json 파일을 열고 다음 scripts를 추가하세요.

package.json
{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

이 스크립트는 애플리케이션을 개발하는 다양한 단계를 참조합니다.

  • dev: 개발 모드에서 Next.js를 시작하기 위해 next dev를 실행합니다.
  • build: 프로덕션 사용을 위해 애플리케이션을 빌드하기 위해 next build를 실행합니다.
  • start: Next.js 프로덕션 서버를 시작하기 위해 next start를 실행합니다.
  • lint: 내장된 Next.js의 ESLint 구성을 설정하기 위해 next lint를 실행합니다.

디렉터리 생성

Next.js는 파일 시스템 라우팅을 사용하므로 애플리케이션의 라우트는 파일을 어떻게 구성하느냐에 따라 결정됩니다.

app 디렉터리

새로운 애플리케이션의 경우에는 앱 라우터 사용을 권장합니다. 이 라우터는 리액트의 최신 기능을 사용할 수 있게 해주며 커뮤니티의 피드백을 기반으로 페이지 라우터의 발전된 버전입니다.

app/ 폴더를 생성한 다음 layout.tsx와 page.tsx 파일을 추가하세요. 이 파일들은 사용자가 애플리케이션의 루트(/)를 방문할 때 렌더링됩니다.

App 폴더 구조

app/layout.tsx 안에 필요한 <html> 및 <body> 태그를 포함한 root layout를 생성하세요.

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

마지막으로 최초 내용을 포함한 홈페이지 app/page.tsx를 생성하세요.

app/page.tsx
export default function Page() {
  return <h1>안녕하세요, Next.js!</h1>
}

참고: layout.tsx를 만들지 않으면 Next.js는 next dev로 개발 서버를 실행할 때 이 파일을 자동으로 생성합니다.

앱 라우터 사용하기에 대해 더 알아보세요.

pages 디렉터리 (선택사항)

앱 라우터 대신 페이지 라우터를 사용하려면 프로젝트의 루트에 pages/ 디렉터리를 만들 수 있습니다.

그런 다음, pages 폴더 안에 index.tsx 파일을 추가하세요. 이것이 홈 페이지(/)가 됩니다:

pages/index.tsx
export default function Page() {
  return <h1>안녕하세요, Next.js!</h1>
}

다음으로 전역 레이아웃을 정의하기 위해 pages/ 안에 _app.tsx 파일을 추가하세요. Custom App 파일에 대해 더 알아보세요.

pages/_app.tsx
import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

마지막으로 서버에서 초기 응답을 제어하기 위해 pages/ 안에 _document.tsx 파일을 추가하세요. Custom Document 파일에 대해 더 알아보세요.

pages/_document.tsx
import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

페이지 라우터 사용하기에 대해 더 알아보세요.

참고: 동일한 프로젝트에서 두 라우터를 모두 사용할 수 있지만 app 내의 라우트는 pages보다 우선됩니다. 혼동을 피하기 위해 새 프로젝트에서는 하나의 라우터만 사용하는 것이 좋습니다.

public 폴더 (선택사항)

이미지, 폰트 등의 정적 자산을 저장하기 위해 public 폴더를 생성하세요. public 디렉터리 내의 파일은 기본 URL(/)에서 코드로 참조할 수 있습니다.

개발 서버 실행

  1. 개발 서버를 시작하기 위해 npm run dev를 실행하세요.
  2. http://localhost:3000을 방문하여 애플리케이션을 확인하세요.
  3. app/layout.tsx(또는 pages/index.tsx) 파일을 편집하고 저장하여 브라우저에서 업데이트된 결과를 확인하세요.