설치
시스템 요구 사항:
- Node.js 18.18 이상.
- macOS, Windows (WSL 포함), 그리고 Linux가 지원됩니다.
자동 설치
create-next-app을 사용하여 새로운 Next.js 앱을 시작하는 것을 권장합니다. 이 방법은 모든 것을 자동으로 설정해 줍니다. 프로젝트를 생성하려면 다음을 실행하세요:
npx create-next-app@latest설치 중에 다음과 같은 프롬프트가 표시됩니다:
What is your project named? my-app
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 your code inside a `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to use Turbopack for `next dev`? No / Yes
Would you like to customize the import alias (`@/*` by default)? No / Yes
What import alias would you like configured? @/*프롬프트 후, create-next-app이 프로젝트 이름으로 폴더를 만들고 필요한 종속성을 설치할 것입니다.
Next.js를 처음 사용하신다면, 애플리케이션의 모든 가능한 파일과 폴더에 대한 개요를 보려면 프로젝트 구조 문서를 참조하세요.
알아두면 좋은 점:
- Next.js는 이제 기본적으로 TypeScript, ESLint, 그리고 Tailwind CSS 구성과 함께 제공됩니다.
- 선택적으로 프로젝트 루트에
src디렉토리를 사용하여 애플리케이션 코드를 구성 파일과 분리할 수 있습니다.
수동 설치
새로운 Next.js 앱을 수동으로 만들려면 필요한 패키지를 설치하세요:
npm install next@latest react@latest react-dom@latestpackage.json 파일을 열고 다음 scripts를 추가하세요:
{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
}
}이 스크립트들은 애플리케이션 개발의 다양한 단계를 나타냅니다:
dev:next dev를 실행하여 개발 모드에서 Next.js를 시작합니다.build:next build를 실행하여 프로덕션 사용을 위해 애플리케이션을 빌드합니다.start:next start를 실행하여 Next.js 프로덕션 서버를 시작합니다.lint:next lint를 실행하여 Next.js의 내장 ESLint 구성을 설정합니다.
디렉토리 생성
Next.js는 파일 시스템 라우팅을 사용하므로, 애플리케이션의 라우트는 파일을 구조화하는 방식에 따라 결정됩니다.
app 디렉토리
새로운 애플리케이션의 경우 App Router를 사용하는 것을 권장합니다. 이 라우터를 사용하면 React의 최신 기능을 사용할 수 있으며, 커뮤니티 피드백을 바탕으로 Pages Router를 발전시킨 것입니다.
app/ 폴더를 만든 다음 layout.tsx와 page.tsx 파일을 추가하세요. 이들은 사용자가 애플리케이션의 루트(/)를 방문할 때 렌더링됩니다.
app/layout.tsx 내에 필수 <html> 및 <body> 태그가 포함된 루트 레이아웃을 만드세요:
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}마지막으로, 초기 내용이 포함된 홈 페이지 app/page.tsx를 만드세요:
export default function Page() {
return <h1>Hello, Next.js!</h1>;
}export default function Page() {
return <h1>Hello, Next.js!</h1>;
}알아두면 좋은 점:
layout.tsx를 만들지 않으면, Next.js는next dev로 개발 서버를 실행할 때 이 파일을 자동으로 생성합니다.
App Router 사용하기에 대해 자세히 알아보세요.
pages 디렉토리 (선택 사항)
App Router 대신 Pages Router를 사용하려면 프로젝트의 루트에 pages/ 디렉토리를 만들 수 있습니다.
그런 다음 pages 폴더 안에 index.tsx 파일을 추가하세요. 이것이 홈 페이지(/)가 됩니다:
export default function Page() {
return <h1>Hello, Next.js!</h1>;
}다음으로, 전역 레이아웃을 정의하기 위해 pages/ 안에 _app.tsx 파일을 추가하세요. 커스텀 App 파일에 대해 자세히 알아보세요.
import type { AppProps } from "next/app";
export default function App({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />;
}export default function App({ Component, pageProps }) {
return <Component {...pageProps} />;
}마지막으로, 서버의 초기 응답을 제어하기 위해 pages/ 안에 _document.tsx 파일을 추가하세요. 커스텀 Document 파일에 대해 자세히 알아보세요.
import { Html, Head, Main, NextScript } from "next/document";
export default function Document() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}Pages Router 사용하기에 대해 자세히 알아보세요.
알아두면 좋은 점: 동일한 프로젝트에서 두 라우터를 모두 사용할 수 있지만,
app의 라우트가pages보다 우선순위가 높습니다. 혼란을 피하기 위해 새 프로젝트에서는 하나의 라우터만 사용하는 것이 좋습니다.
public 폴더 (선택 사항)
이미지, 폰트 등의 정적 자산을 저장하기 위해 public 폴더를 만드세요. public 디렉토리 내의 파일은 기본 URL(/)부터 시작하여 코드에서 참조할 수 있습니다.
개발 서버 실행하기
npm run dev를 실행하여 개발 서버를 시작합니다.http://localhost:3000을 방문하여 애플리케이션을 확인합니다.app/page.tsx(또는pages/index.tsx) 파일을 수정하고 저장하여 브라우저에서 업데이트된 결과를 확인합니다.