Next.js 12 -> 13 버전 정리

지후라보노 2023. 6. 7. 09:34

2022년 10월 Next.js는 13버전을 출시했다.

기존에 12버전과 사용 방법보다 어렵진 않지만 많이 변경 되었기에 미리 학습해보면 좋을거같다.

실무에서는 12버전으로 개발중인 기업도 많을것이다 그래서 12버전을 미리 학습하고 13버전을 배워보는것을 추천한다. 또한 13버전은 아직 베타버전이라 규모가 큰 프로젝트를 진행하는 기업이라면 12버전을 그대로 사용할 것으로 생각한다.

설치법

npm i next@latest react@latest react-dom@latest eslint-config-next@latest

업데이트 내용

| app 디렉토리 (베타)

12버전에서는 pages 라는 디렉토리가 존재했다.

Next.js를 사용하면서 편한점 중 하나를 이야기하자면 react-router-dom과 라우팅 코드를 세팅하지 않아도 pages 디렉토리 하위에 생성한 파일은 자동으로 라우팅이 세팅되어서 라우팅에 대한 개발 시간을 줄일 수 있었다.

13버전은 app/ 이라는 디렉토리가 만들어졌다.

12버전의 pages 와 별 다를것 없어보이지만 app 디렉토리를 사용하면 디렉토리 구조도 깔금해지고 조금있다가 이야기 할 layout과 여러가지 기능이 존재한다.

Layouts.js

서버사이드 렌더링이라는 개념이 존재하면서 컴포넌트의 변경이 있을 때 페이지가 사라졌다가 다시 나타난다.

페이지 단위로 컴포넌트가 바뀌어도 Layout 내에서는 리렌더링을 최대한 줄여서 성능을 향상시킬 수 있다.

작성한 예시 코드이다

import styles from './layout.module.css'
import './globals.css'
import Link from 'next/link'

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        <header className={styles.header}>
          <h1>Demo Note App</h1>
          <nav className={styles.nav}>
            <Link href='/product'>상품</Link>
            <Link href='/about'>소개</Link>
          </nav>
        </header>
        {children} // 화면에 출력 될 page 들
      </body>
    </html>
  )
}

| Data Fetching

React Suspense 기반으로 구현 된 새로운 data fetching 방식이다.

기존에는 함수를 별도로 export하면서 서버사이드 단에서 돌아가는 로직을 구현했다.

이제는 그런 방법을 사용하지 않으며 서버사이드 로직을 구현할 수 있다.

// app/page.js
async function getData() {
  const res = await fetch('https://api.example.com/...');
  // The return value is *not* serialized
  // You can return Date, Map, Set, etc.
  return res.json();
}

// This is an async Server Component
export default async function Page() {
  const data = await getData();

  return <main>{/* ... */}</main>;
}

| Turbopack (alpha)

Rust 기반의 새로운 번들러이며 Next.js의 공식문서에서는 기존에 사용하던 webpack 보다 700배나 빠르다고 설명되어있다. 기존 webpack은 최대 성능의 한계에 도달했고 vite보다 10배가 빠르다.

Turbopack은 최소한의 자산만 번들로 제공하며 시작시간이 매우 빠르다 아직 알파 기간이며 Vercel은 사용자의 피드백의 귀를 기울이며 계속 업데이트를 제공하려 노력하고있다.

| font 최적화 (next/font)

Next.js는 글꼴 최적화 라는 시스템을 도입했다.

개인 정보 보호를 염두에 두고 Google에서 제공하는 모든 font를 사용할 수 있다.

원래는 브라우저에서 Google로 요청을 보냈지만 폰트 최적화를 사용하면 빌드 시 폰트가 다운로드 되어 호스팅 된다.

import { Inter } from '@next/font/google';

const inter = Inter();

<html className={inter.className}>

| Link (next/link)

12버전에서는 next/link 를 에서 Link를 사용하면 항상 a 태그를 명시하고 사용하여야 했다.

하지만 13버전에서의 Link는 a태그이며 말 그대로 합쳐졌다고 생각해도 될거같다.

import Link from 'next/link'

// Next.js 12: `<a>` has to be nested otherwise it's excluded
<Link href="/about">
  <a>About</a>
</Link>

// Next.js 13: `<Link>` always renders `<a>`
<Link href="/about">
  About
</Link>

아직 사용하지 않은 기능들은 정리를 못했다. 사용해가며 장 단점이 떠오르면 이 곳에 수정하여 다시 정리하겠다.