Node.js 18.17이나 그 이상의 버전이 필요!
자동 설치
npx create-next-app@latestnext 최신 버전으로 자동 설치!
TypeScript, ESLint, Tailwind CSS 등 선택하여 자동으로 설치하게 할 수 있다.
수동 설치
npm install next@latest react@latest react-dom@latest
그 이후 package.json을 열어서 다음과 같이 설정해주면 된다.
{
"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를 시작한다. (build 한 것으로 실행)
- lint: next lint로 시작하면, Next.js의 내장 ESLint 설정이 실행된다.
app 폴더 만들기
app 폴더를 만들고 타입스크립트를 사용한다면 layout.tsx와 page.tsx를, 자바스크립트를 사용한다면 확장자를 .jsx로 만든다. 사용자가 방문한 첫 화면에 렌더링 될 화면이다.
app/layout.tsx에 <html>과 <body>태그와 함께 최상위 레이아웃을 만든다.
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>
}( 만약 layout.tsx를 만드는 것을 까먹었다면, next dev로 실행할 때 자동으로 만들어준다.)
public 폴더 만들기
이미지나 폰트같은 정적 자원들을 보관하기 위해서 public 폴더를 옵션으로 만들어도 된다. public 폴더 안에 있는 것들은 기본 URL(/)로 시작되는 URL로 참조할 수 있다.
개발 서버 실행하기
- npm run dev를 실행한다.
- http://localhost:3000 을 방문하여 볼 수 있다.
- app/layout.tsx나 app/page.tsx을 수정하고 저장하면 업데이트된 브라우저를 볼 수 있다.
'Next.js 공식문서 (번역, 공부) > Getting Started' 카테고리의 다른 글
| Project Structure (0) | 2023.12.08 |
|---|