[Next] create-next-app 분석하기

create-next-app을 깔아보자.

npx create-next-app

 

 

create-next-app가 설치되고, 기본적으로 세팅되어 있는 page, public, styles 파일을 살펴보자.

 

styles

styles 폴더에서는 스타일 파일을 저장해준다.

 

public

public에는 페이지에서 사용할 공개 리소스를 넣을 수 있다. (ex. image)

그런데, public 파일 내부를 보면 우리가 이전에 사용했던 react 프로젝트, create-react-app와 달리 index.html 파일이 안보인다.

그 이유는 nextJS는 사전 렌더링 기능을 내장하기 때문이다. (pages에서 계속)

 

pages

NextJS는 싱글 페이지 어플리케이션(spa)을 제공한다.

서버에 요청이 오면 이 싱글 페이지에 사전 렌더링을 거쳐 콘텐츠를 포함한 초기 페이지를 보여주게 되는데,

바로, pages 폴더에서 파일 기반 라우팅을 설정하고 어플리케이션을 구성할 여러 페이지를 정의할 수 있다.

pages 파일에서 index.js 파일은 루트 페이지로, 도메인에 / 까지만 있는 요청이 들어오면 index.js 파일을 읽어들인다.

pages파일 내에 news.js 파일을 하나 더 만들어보자.

next프로젝트에서는 파일 명이 중요하다.

index 이름은 / 뒤에 아무것도 없을 때 불러지며, index가 아닌 다른 파일 이름의 경우 경로 이름으로 사용된다.

function NewsPage() {
  return <h1>NewsPage</h1>;
}

export default NewsPage;

따라서, news.js 파일은 https://domain.com/news 라는 요청에 해당한다.

추가로 localhost:3000/news의 소스코드를 살펴봐보자.

소스코드를 보면 빈 페이지가 아닌, 방금 우리가 jsx로 넣은 h1태그와 내용이 있는 것을 확인할 수 있다.

이게 바로 기본 react 앱과 next의 차이인데, 기본 React 앱에서는 서버에서 페이지를 사전 렌더링 하지 않지만,

위에 보이는 html 소스 코드는 서버가 재전송한 코드다.

 즉,  콘텐츠<h1>...가 포함되어 있다는 것은 전체 페이지를 사전에 렌더링 했다는 의미이다.

 

이를 통해 2가지 NextJS의 장점을 확인할 수 있다.

첫번째, 검색엔진이 해당 콘텐츠를 볼 수 있다.

두번째, 랜더되는 동안의 깜빡거림이 없다.

 

++
NextJS 프로젝트는 이미 최신 React 설정을 지원해서 아래 import를 생략해도 된다. 안보이지만 이미 추가된 것이다.

import React from 'react'