icon안동민 개발노트

Next.js 14 소개

 Next.js는 React 기반의 강력한 웹 애플리케이션 프레임워크로, 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), API 라우트 등 현대적인 웹 개발에 필요한 다양한 기능을 제공합니다.

 Next.js 14는 이러한 기능들을 더욱 강화하고, 개발자 경험을 개선한 최신 버전입니다.

Next.js의 주요 특징

  1. 서버 사이드 렌더링 (SSR) : 초기 페이지 로드 시간을 줄이고 SEO를 개선합니다.
  2. 정적 사이트 생성 (SSG) : 빠른 페이지 로드와 확장성을 제공합니다.
  3. 파일 기반 라우팅 : 직관적이고 간단한 라우팅 시스템을 제공합니다.
  4. API 라우트 : 백엔드 API를 쉽게 생성할 수 있습니다.
  5. 코드 분할 : 자동으로 코드를 최적화하여 성능을 향상시킵니다.
  6. 이미지 최적화 : 자동 이미지 최적화 기능을 제공합니다.
  7. TypeScript 지원 : 기본적으로 TypeScript를 지원합니다.

Next.js의 기본 구조

 Next.js 프로젝트의 기본 구조는 다음과 같습니다.

my-next-app/
├── pages/
│   ├── index.js
│   ├── about.js
│   └── api/
│       └── hello.js
├── public/
│   └── images/
├── styles/
│   └── globals.css
├── components/
│   └── Layout.js
├── package.json
└── next.config.js

 이 구조는 pages 디렉토리를 중심으로 구성되며, 각 파일은 자동으로 라우트가 됩니다.

간단한 코드 예제

 다음은 Next.js에서 간단한 페이지를 생성하는 예제입니다.

pages/index.js
import Head from 'next/head'
 
export default function Home() {
  return (
    <div>
      <Head>
        <title>Welcome to Next.js</title>
        <meta name="description" content="Learn Next.js" />
      </Head>
 
      <main>
        <h1>Welcome to Next.js!</h1>
        <p>Get started by editing pages/index.js</p>
      </main>
    </div>
  )
}

 이 코드는 기본 홈페이지를 생성하며, Head 컴포넌트를 사용하여 메타 데이터를 설정합니다.

Next.js의 작동 방식

graph TD
    A[브라우저 요청] --> B[Next.js 서버]
    B --> C{라우팅}
    C --> |정적 페이지| D[정적 생성 SSG]
    C --> |동적 페이지| E[서버 사이드 렌더링 SSR]
    C --> |API 요청| F[API 라우트]
    D --> G[HTML 응답]
    E --> G
    F --> H[JSON 응답]
    G --> I[클라이언트에서 React 하이드레이션]

 이 도표는 Next.js에서 요청이 처리되는 기본적인 흐름을 보여줍니다.

앞으로의 학습 방향

 이 자습서의 다음 장들에서는 위에서 언급한 각 특징들을 더 자세히 다룰 것입니다. 라우팅, 데이터 페칭, 서버 사이드 렌더링, 정적 사이트 생성 등의 개념을 실제 예제를 통해 학습하게 될 것입니다. 이를 통해 Next.js를 사용하여 강력하고 효율적인 웹 애플리케이션을 구축하는 방법을 배우게 될 것입니다.

퀴즈

  1.  Next.js의 주요 렌더링 방식 두 가지는 무엇인가요?

     a) 클라이언트 사이드 렌더링과 서버 사이드 렌더링

     b) 서버 사이드 렌더링과 정적 사이트 생성

     c) 동적 렌더링과 정적 렌더링


  1.  Next.js에서 라우팅은 어떤 방식으로 이루어지나요?

     a) 설정 파일을 통한 수동 라우팅

     b) 파일 기반 자동 라우팅

     c) URL 패턴 매칭을 통한 라우팅


  1.  Next.js에서 API 라우트를 생성하기 위해 파일을 어느 디렉토리에 위치시켜야 하나요?

     a) /api

     b) /pages/api

     c) /routes/api

 정답 : b, b, b

 이 퀴즈를 통해 Next.js의 주요 특징에 대한 이해를 확인할 수 있습니다.

App Router vs Pages Router