Next.js 시작하기

React 완벽 가이드 with Redux, Next.js, TypeScript (opens new window)

Next.js는 무엇인가?

Next.js 는 제작을 위한 react 프레임워크다. 말 그대로 대규모 react 앱을 더 편리하게 구축할 수 있도록 많은 기능을 제공한다. 이른바 리액트를 기반으로 하는 풀스택 프레임워크라고 할 수 있다.

Next.js 특징

1. SSR (서버사이드 렌더링, Server-side Rendering)을 내장하고 있다.
2. 파일 기반 라우팅

Next.js 시작하기

사전준비

• Node.js 설치

npx create-next-app

CNA 프로젝트 기본 구조

├── pages     # base routing, root: _app.js
├── public    # common resource
└── styles    # style

• pages
  • 파일 기반 라우팅
  • root: _app.js
• public
  • 공용 리소스가 존재
  • next.js 는 리액트와 달리 index.html이 없는데, 이는 Pre-rendering을 사용하기 때문이다. html을 만든 후 js를 로드하는 방식
• styles
  • 스타일 파일이 존재

Routing

파일명에 의한 라우팅

pages 폴더 내 파일명이 라우팅의 경로가 된다.

예를 들어, 파일명이 home 이라면 도메인/home 까지가 라우팅 경로가 된다.

예외의 경우로 파일명이 index.js 라면 도메인/ 경로로 라우팅 된다.

/pages/index.js → domain.com
/pages/home.js → domain.com/home

중첩 경로 라우팅

중첩 경로의 경우 폴더 새 폴더를 만들어서 라우팅한다.

/pages/news/index.js → domain.com/news
/pages/news/item → domain.com/home/item

동적 라우팅

대괄호([ ]) 를 사용하면 동적 페이지임을 인지한다.

대괄호 안에는 식별자를 명시한다. 식별자명은 원하는 이름으로 직접 설정한다.

/pages/news/[item].js
→ domain/news/somthing-important
→ domain/news/somthing-else
→ ...

useRouter 훅을 통해 쿼리 접근이 가능하다.

예를들어 /pages/news/[item].js 의 동적 라우팅이라면 router.query.item 로 접근한다.

// domain.com/news/[item].js
import { useRouter } from 'next/router';

function DetailPage() {
  const router = useRouter();
  console.log(router.query.item);

  return <h1>the detail page.</h1>;
}

export default DetailPage;

위의 코드를 통해 domain.com/news/something-else 경로로 이동 시 something-else 를 출력하는 것을 확인할 수 있다.

Link 를 사용한 라우팅

a 앵커 태그를 사용할 경우 브라우저에 새로운 요청을 보내게 되므로 페이지가 새로고침 된다. SPA가 아니게 됨.

Link 를 통한 라우팅은 페이지가 새로고침 되지 않고 페이지를 이동.

단, Next.js 에서의 Link 는 리액트와 달리 to 가 아닌 href 프로퍼티를 받는다.

import Link from 'next/link';

function HomePage() {
  return (
    <ul>
      <li>
        <Link href="/">All Meetups</Link>
      </li>
      <li>
        <Link href="/new-meetup">Add New Meetup</Link>
      </li>
    </ul>
  );
}

export default HomePage;