Installation

KimMinJun 2023. 6. 20. 23:37

Node.js 18.17이나 그 이상의 버전이 필요!

자동 설치

npx create-next-app@latest

next 최신 버전으로 자동 설치!

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을 수정하고 저장하면 업데이트된 브라우저를 볼 수 있다.

저작자표시 (새창열림)