[Next.js] Next.js 시작하기

🔖 개요

이제 우리는 리액트와 넥스트의 차이를 알고 있다.

그렇다면 본격적으로 Next.js를 통해 프로젝트를 생성하는 방법에 대해 알아보자.

🔖 Next.js 설치

📍 수동 설치

아무것도 없는 빈 폴더에 넥스트와 리액트를 수동으로 설치하는 방법이 있다. 명령어는 아래와 같다.

npm install react@latest react-dom@latest next@latest 

• react : UI 인터페이스를 구성하는 라이브러리
• react-dom : 구성된 UI 인터페이스를 DOM에 렌더링하는 라이브러리

설치 후, package.json의 script를 수정해서 프로젝트를 실행할 수 있도록 만들어 준다.

"scripts": {
  "dev": "next dev",
}

이제 dev 명령어 사용 시, 프로젝트를 실행할 수 있다.

app 하위 경로에 페이지 파일 하나도 만들어 준다.

export default function Home() {
  return <div>Home</div>;
}

page.tsx 파일을 생성함으로써, 해당 파일 내부에서 페이지를 구성하게 된다. TypeScript를 사용하지 않는다면 확장자를 .jsx 로 하면 된다.

하지만 Next.js는 기본적으로 TypeScript 사용을 권장한다. 또한, 이후 배우게 될 layout.tsx 파일도 필요하다. npm run dev 명령어를 수행하면 자동으로 수행할 수 있다.

📍 자동 설치

위 명령어를 사용해 수동 작업하기엔 귀찮다.

자동으로 설치할 수 있는 명령어는 아래와 같다.

npx create-next-app@latest

해당 명령어를 통해 Next.js 프로젝트를 한 번에 설치할 수 있다.