Next.js란?
Next.js는 React를 활용하여 SSR(server side rendering) 을 구현시키는 프레임워크이다.
SSR(server side rendering)이란?
SSR은 서버에서 사용자에게 보여줄 완성된 페이지를 구성하여 렌더링하는 방식을 말한다.
서버에서 렌더링을 실행하다보니 CSR(client side rendering)보다 최초 렌더링에 소요되는 시간은 늘어나지만 페이지 렌더링이 완료되는 시간은 줄어든다.
예를 들어서 쇼핑몰 사이트를 제작한다고 가정했을때 기존의 CSR 페이지라면 기초 레이아웃을 구성하고 사용자에게 레이아웃이 보여진다. 이후 상품 목록을 서버에서 불러와 업데이트 하는 과정을 기다려야한다.
하지만 여기서 SSR을 적용시킬 경우 최초 렌더링은 조금 더 시간이 걸리겠지만 최종적으로 상품 목록이 포함된 페이지가 렌더링 되는 시간은 단축되니 사용자 입장에서 유의미한 정보를 더 빠르게 얻을 수 있게 된다.
또한 SEO(Search Engine optimization), 검색 엔진 최적화를 구성하는 것 또한 쉽게 만든다.
파일 기반 라우팅
기존의 React Router를 사용할 경우 페이지 컴포넌트 파일을 별도로 분리 한 뒤 최상위 컴포넌트나 페이지 컴포넌트 내부에서 라우팅 관련 코드를 작성해야 한다.
하지만 Next.js 같은 경우에는 파일과 폴더를 이용해서 페이지와 라우트를 정의한다.
마치 처음 HMTL을 배울때 파일별로 페이지 작성하던 것처럼 말이다.
풀스택 빌드
Next.js에서는 node.js의 백엔드 API를 사용하여 리액트 내부에 백엔드 API를 쉽게 추가 할 수 있게 해준다.
Next.js 시작하기
Node.js가 설치도었다는 가정하에 프로젝트 디렉토리 터미널에서 다음과 같은 명령어를 입력해준다.
$ npx create-next-app
$ yarn create-next-app이후 프로젝트 관련 선택사항들을 선택한다.
✔ What is your project named?
ㄴ 프로젝트 이름 입력
✔ Would you like to use TypeScript with this project?
ㄴ 타입스크립트 사용 여부
✔ Would you like to use ESLint with this project?
ㄴ ESLint 사용 여부
✔ Would you like to use `src/` directory with this project?
ㄴ src 디렉토리 사용 여부
✔ Would you like to use experimental `app/` directory with this project?
ㄴ 실험적인 app 디렉토리(Next.js 13 버전 업데이트 사항) 사용 여부
✔ What import alias would you like configured? … @/*
ㄴ import 표시 특수문자 선택 (@ or *)이후 프로젝트 디렉토리로 이동하여
npm run dev로 개발 환경 서버를 구축한다.
라우팅 설정하기
Next.js를 인스톨 했다면 /src 디렉토리 내에 /pages라는 폴더가 자동으로 생성된다.
이때 /pages 내에 존재하는 파일명들이 라우팅 url의 path와 동일하다.
예를 들어 /pages 내에 product.js라는 파일이 존재한다면 도메인/product를 통하여 접근할 수 있다.
혹은 /pages 디렉토리 내부에 /product 폴더를 생성 후 해당 폴더 내부에 index.js 페이지 파일을 생성하여도 동일하게 작동된다.
기본적으로 /pages 디렉토리의 index.js는 /를 통하여 접속하는 디폴트 페이지의 역할을 수행한다.
예시
└── pages
├── index.js // 도메인 디폴트 페이지
├── product.js // 도메인.com/product
└── event
└── index.js // 도메인.com/event중첩 라우팅 설정
만약 /product/outer 같은 중첩 라우팅을 설정할땐 어떻게 해야할까?
이때도 동일하게 디렉토리를 설정하여 중첩 라우팅을 설정 할 수 있다.
폴더 내에 폴더를 생성하면 해당 폴더의 폴더명이 path가 되고 상위 루트의 중첩 라우팅이 된며 index.js가 해당 path에 라우팅 될 페이지가 된다.
추가적으로 중첩된 디렉토리에서 index.js가 아닌 다른 파일명으로 지정시 또다시 해당 중첩 라우팅을 할 수 있다.
예시
└── pages
├── index.js // 도메인 디폴트 페이지
├── product
│ └── index.js // 도메인.com/product
│ └── outer
│ └── index.js // 도메인.com/product/outer
│ └── winter.js // 도메인.com/product/outer/winter
└── event
└── index.js // 도메인.com/event동적 라우팅 설정
Next.js에서 동적 라우팅을 구현하려면 지정된 형식의 파일명을 사용하여야 한다.
React Router에서는 동적 라우팅 설정시 path="/:product"처럼 :를 사용하여 Path Parameter를 표기하였다.
Next.js는 파일명에 대괄호를 부여하여 Path Parameter를 표기한다.
예를 들어서 pages/product/outer 폴더 내부에 [outerId].js라는 파일 생성 후 도메인.com/product/outer/"something-path-parameter"에 접속시 Path Parameter를 부여받은 해당 페이지를 띄우게 된다.
예시
└── pages
├── index.js // 도메인 디폴트 페이지
├── product
│ └── index.js // 도메인.com/product
│ └── outer
│ └── index.js // 도메인.com/product/outer
│ └── [outerId].js // 도메인.com/product/outer/something-path-parameter
└── event
└── index.js // 도메인.com/event만약 Path Parameter를 추출하고 싶다면 Next.js의 내부 하위 패키지인 next/router에서 useRouter를 import하여 추출할 수 있다.
import한 useRouter를 호출하면 현재 페이지의 라우팅 관련 정보들이 담겨있는 객체를 반환한다.
이 객체에서 query 프로퍼티에 접근하면 Path Parameter 정보를 담은 객체가 존재한다.
// /pages/product/outer/[outerId].js
// currentURL = 도메인.com/product/outer/131211
import { useRouter } from "next/router";
//...
const router = useRouter();
console.log(router.query.outerId) // 131211
//...페이지 이동하기
기존의 방식으로 페이지를 이동할때는 HTML의 <a> 태그를 사용한다. 하지만 해당 방식을 사용하면 페이지 이동시 새로운 HTML 파일을 요청하게되며 SPA의 특성이 사라지게 된다. 이러한 현상은 불필요한 서버 요청, 전역 상태의 소실 등의 부작용 또한 동반하게 된다.
이러한 현상을 방지하기 위해서 Next.js 에는 next/link라는 페이지 이동 전용 하위 패키지가 존재한다.
사용법은 매우 간단하다.
import Link from "next/link";Link 컴포넌트를 next/link 패키지에서 import하고 <a>를 <Link>로 치환하여 사용해주면 된다.
