Next js 튜토리얼 1편: 시작하기

처음으로 next js를 사용하여 자사 홈페이지를 리뉴얼 하는 프로젝트를 진행했습니다.

어떻게 학습하며 프로젝트를 진행했는지 정리하려 합니다.

가장 우선적으로 한 일은 next js docs에서 제공하는 튜토리얼을 학습했습니다.

그에 따라 next js docs를 기반으로 작성하겠습니다

NEXT.js의 기능

• 기본적으로 서버사이드 렌더링 지원 합니다

• 빠르게 페이지를 로드하기 위해 자동으로 코드 스플릿을 해줍니다

• 페이지를 기반으로 간단한 클라이언트 사이드 라우팅을 제공합니다

• 개발 환경에서 Hot Module Replacement를 지원합니다

  (dev 모드에서 코드가 수정되면 따로 빌드하지 않아도 자동으로 적용을 시켜줍니다)

• Express 또는 Node 서버와 함께 사용할 수 있습니다

• Babel과 Webpack 설정을 원하는데로 수정할 수 있습니다

Setup

Next.js는 window, mac, linux에서 모두 동작합니다. Next.js를 사용하기 위해서는 Node.js만 설치하면 됩니다
각 운영체제 별로 설치 방법은 생략하겠습니다

시작하기 위해 다음 명령을 실행해주세요

mkdir hello-next

cd hello-next

npm init -y

npm install --save react react-dom next

mkdir pages

그 후 package.json을 수정해주세요

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

기본적인 준비는 끝났습니다. 다음 명령어를 실행하면 dev 서버가 켜집니다

npm run dev

그 후 http://localhost:3000에 접속하면 아직 첫페이지를 만들지 않았기 때문에 404에러 화면을 볼 수 있습니다.

Creating Our First Page

그럼 첫 페이지를 만들어 봅시다
pages/index.js에 아래와 같이 입력하세요

const Index = () => (
  <div>
    <p>Hello Next.js</p>
  </div>
);

export default Index;

다시 http://localhost:3000에 접속하면 Hello Next.js가 페이지에 나타납니다

다음 장에서는 페이지들을 연결하는 방법에 대해 정리하겠습니다