Next.js 설치하기
React의 CRA와 유사하게 간편 설치할 수 있으며, 자동 설치와 수동 설치가 있다.
자동 설치
자동 설치의 경우, 명령어로 설치 후 기본적인 폴더 구조가 자동으로 생성된다.
npx create-next-app (프로젝트명)설치 시 아래와 같은 프롬프트가 표시된다.
Would you like to use TypeScript? (타입스크립트 사용 여부)
Would you like to use ESLint? (eslint 사용 여부)
Would you like to use Tailwind CSS? (테일윈드 사용 여부)
Would you like to use `src/` directory? (src 폴더를 사용할지 여부)
Would you like to use App Router? (recommended) (앱 라우터 사용 여부)
Would you like to customize the default import alias? (구문 커스텀 할건지 여부)
What import alias would you like configured? @/* (절대경로 설정 여부)수동 설치
프로젝트 폴더로 이동해 아래 패키지를 설치한다.
npm install next@latest react@latest react-dom@latestpackage.json의 scripts에 아래 내용을 추가한다.
{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
}
}디렉토리 생성
Next.js는 파일 시스템 라우팅을 사용하며, 파일 구조에 따라 프로젝트의 경로가 결정된다. Next.js 13버전 아래의 기존 Pages Router 방식과, 13버전에서 업데이트된 App Router가 있다.
app 디렉토리
새 프로젝트의 경우 앱 라우터 사용을 권장하며, 이 방식을 사용하면 React의 최신 기능도 사용할 수 있다.
root 경로에 app 폴더를 생성한 후. 폴더 내부에 layout.tsx와 page.tsx를 추가한다. (사용자가 루트 페이지를 방문할 때 렌더링)
layout.tsx에 아래와 같이 루트 레이아웃을 작성한다.
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}page.tsx에는 최초 노출될 콘텐츠를 작성해준다.
export default function Page() {
return <h1>Hello, Next.js!</h1>;
}만약, layout.tsx 생성을 잊는다고 해도 Next.js에서 개발 서버를 시작할 때 자동으로 생성한다.
* 학습 일관성을 위해 Pages Router는 App Router를 완주한 후 따로 진행하겠다.
'스터디' 카테고리의 다른 글
| [Next.js] Defining Routes(라우트 정의) (0) | 2023.08.11 |
|---|---|
| [Next.js] Routing (0) | 2023.08.05 |
| [Next.js] Getting Started (0) | 2023.07.30 |
| [Typescript] Type Challenge (0) | 2023.07.23 |
| [Typescript] 네임스페이스와 모듈 (0) | 2023.07.14 |
