Next.js, 어떻게 편할까?

Next.js란

• React 기반의 프레임워크이다.
• 웹 애플리케이션을 쉽게 구축할 수 있다. 별도 설정 없이도 가능한 게 많다.

다른 프레임워크, 라이브러리보다 편리한 점

1. (설정 불필요) 추가 설정을 안 해도 된다.

   • 따로 설정할 것이 많으면 정하고 지켜야 할 규칙도 많다.
   • 프레임워크가 지정한 방법이 있으면 그 자체로 컨벤션이 된다.

2. (특징적 기능) 추가 설정으로도 불가능한 것이 가능하다.

   • 다른 자바스크립트 환경에서는 불가능한 것이 가능하다.

특징적 기능

(관리 용이) 파일 기반 라우팅

Next.js

• 파일 시스템을 라우팅 시스템으로 사용한다.
  pages 디렉토리에 파일을 생성하면 해당 파일이 자동으로 URL 경로와 매핑한다.
• 파일명을 [param] 형태로 하여 동적 라우팅도 가능하다.

다른 프레임워크에서 하려면

• 예를 들어 React Router는 라우팅 설정을 별도로 구성해야 하는데 방법이 다양하다.
• 경로 = 파일명이 아니어서 파일명을 짓는 수고가 든다.

설정 불필요

(관리 용이) API 라우팅

Next.js

• pages/api 디렉토리에 파일을 생성해 API 엔드포인트를 만든다.
• 프론트엔드와 백엔드 코드를 하나의 프로젝트에서 관리할 수 있다.

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello, world!' });
}

엔드포인트 예
GET /users - 모든 사용자 목록을 가져오는 요청
POST /users - 새로운 사용자를 생성하는 요청
GET /users/{id} - 특정 ID를 가진 사용자의 정보를 가져오는 요청
PUT /users/{id} - 특정 ID를 가진 사용자의 정보를 업데이트하는 요청
DELETE /users/{id} - 특정 ID를 가진 사용자를 삭제하는 요청

다른 프레임워크에서 하려면

• 전통적인 웹 개발에서는 별도의 백엔드 서버(예: Express.js, Django 등)를 설정하고, API 통신으로 프론트엔드와 통합한다.

// pages/index.js
export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return { props: { data } };
}

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

(최적화 지원) 서버 사이드 렌더링 (SSR) 및 정적 사이트 생성 (SSG)

Next.js

• 서버 측에서 페이지를 렌더링하는 SSR, 빌드 시점에 정적 페이지를 생성하는 SSG를 기본적으로 지원한다. SEO, 초기 로드 성능을 향상할 수 있다.

다른 프레임워크에서 하려면

• React와 같은 라이브러리는 기본적으로 클라이언트 사이드 렌더링(CSR)만을 지원한다.
• 예: Gatsby, Nuxt.js 등 추가적인 설정과 라이브러리가 필요하다.

(최적화 지원) 이미지 최적화

Next.js

• 성능을 향상시킬 수 있는 이미지 최적화 기능이 내장되어 있다.
• 이미지 크기 조정, 포맷 변환, 지연 로딩 등

다른 프레임워크에서 하려면

• Cloudinary, Imgix 등 별도의 라이브러리나 서비스를 사용한다.

(최적화 지원) 자동 코드 분할

Next.js

• 빌드 시점에 페이지 단위로 자동 코드 분할이 이루어진다.
• 사용자가 특정 페이지에 접근할 때 그 페이지에 필요한 코드만 다운로드된다.
• 초기 로드 성능이 향상된다.

// 프로젝트 구조

my-next-app/
├── pages/
│   ├── index.js
│   ├── about.js
│   └── contact.js

// 빌드 후 파일 구조 (Next.js 애플리케이션)
// Next.js는 각 페이지를 별도의 JavaScript 청크로 분할

.next/
├── static/
│   ├── chunks/
│   │   ├── pages/
│   │   │   ├── index.js
│   │   │   ├── about.js
│   │   │   └── contact.js

다른 프레임워크에서 하려면

• Webpack 등의 번들러를 직접 설정한다.

(보안) 미들웨어

Next.js

• Next.js 12부터 미들웨어 기능을 지원한다.
• 요청을 가로채고, 라우팅 전후에 인증, 로깅, 리다이렉션 등을 수행할 수 있다.

// middleware.js
// 토큰이 없으면 로그인 페이지로 리다이렉트

export function middleware(req, ev) {
    if (req.nextUrl.pathname.startsWith('/admin')) {
        const **token = req.cookies.token;**
        **if (!token) {**
            return Response.**redirect(new URL('/login', req.url))**;
        }
    }
    return Response.next();
}

다른 프레임워크에서 하려면

• Express.js와 같은 백엔드 프레임워크에서, 별도의 설정과 코드를 추가해 사용한다.

(코드 호환성) CSS 및 스타일링

Next.js

• CSS 및 Sass(!= SCSS)를 기본적으로 지원한다.
• 설정 없이 다양한 CSS-in-JS 라이브러리와 호환된다(styled-components, Emotion 등).

다른 프레임워크에서 하려면

• 스타일링을 위한 설정이 필요하다.

(코드 호환성) TypeScript 지원

Next.js

• TypeScript를 기본적으로 지원한다.
• 프로젝트에 TypeScript를 도입하는 과정이 매우 간단하다.

touch tsconfig.json // tsconfig.json 파일을 생성
npm run dev // 개발 서버 실행, 패키지와 설정 파일들이 자동으로 설치되고 구성됨

npm install --save-dev typescript @types/react @types/node // TypeScript 설치
npm run dev // 개발 서버 실행, 패키지와 설정 파일들이 자동으로 설치되고 구성됨

다른 프레임워크

• 설정 파일과 추가 패키지를 직접 구성한다.

(관리 용이) 배포 및 호스팅

Next.js

• Next.js 앱은 CI/CD 파이프라인을 내장한 Vercel로 쉽고 빠르게 배포, 호스팅할 수 있다.
  - GitHub, GitLab, Bitbucket 등과 통합하여 코드 푸시 시 자동으로 배포할 수 있다.

다른 프레임워크

• 배포를 위한 별도의 CI/CD 설정이나 호스팅 서비스를 구성해야 한다.