Next.js Conf

2022. 10. 30. 22:18ㆍFront

10월 26일 컨퍼런스에서 발표된 Next.js 13 버전, 새롭게 변경된 내용을 정리해봅니다 :)

 

|  공식 문서 | 컨퍼런스 페이지 | 예제 배포 사용

 

Next.js 13 App Playground – Vercel

Explore the new app directory (App Router) in Next.js 13.

vercel.com

 

 

 

최신 Next.js 설치

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

 

 

무엇이 달라졌는지?

  • app/ Directory (beta) (app/디렉토리): Easier, faster, less client JS 
    • Layouts (레이아웃)
    • React Server Components (리액트 서버 컴포넌트)
    • Streaming (스트리밍)

  • Turbopack (alpha): Up to 700x faster Rust-based Webpack replacement.
    • 700배 빠른 Rust 기반의 웹팩 대체품

  • New next/image (stable): Faster with native browser lazy loading.
    • 더 빨라진 레이지 로딩

  • New @next/font (beta): Automatic self-hosted fonts with zero layout shift.
    • 구글 폰트 내장

  • Improved next/link: Simplified API with automatic <a>
    • 자식 요소로 <a> 태그 불필요

 

app/ Directory

Next.js 13버전부터는 `app/` 이라는 새로운 디렉토리가 등장하여 라우팅 및 레이아웃 기능을 개선했습니다. 컴포넌트, 테스트, 스타일 파일과 같은 경로에 어플리케이션 코드를 배치할 수 있게 되었습니다.

 

 

  • 기존 : pages 디렉토리 안에 파일을 생성하여 별도의 라우터 없이 애플리케이션 내부에서 즉시 경로를 생성 (Automatic Routing)

  • Next 13 버전 : pages 디렉토리와 app 디렉토리가 공존할 수 있는 베타 버전으로 제공되었으며 점진적으로 적용 예정입니다.

Next.js는 routes에서 사용할 수 있는 다양한 파일 종류를 제공합니다. (링크)

 

 

 

 

1. Layouts

app/ 디렉토리는 레이아웃 기능을 제공하며, 페이지간 LNB, 네비게이션 같은 공통적인 UI를 공유할 수 있도록 적용되었습니다.

Routing은 app 디렉토리 안에서 진행되며 이때, page.js 라는 단일 파일을 생성해야만 사용할 수 있으며,

이를 통해 불필요한 리렌더링을 방지하고, 컴포넌트간의 상호 작용을 구현할 수 있습니다.

 

app 디렉토리에 파일을 하나만 생성한 채 터미널을 실행시키면, 문구와 함께 Next.js에서 layout.js 파일을 자동으로 생성되며, layout 파일을 통해 레이아웃을 적용할 수 있습니다.

Your page app/page.js did not have a root layout, we created app/layout.js for you.

 

app > layout.js

export default function RootLayout({children}) {
	return(
		<html>
			<head></head>
			<body>{children}</body>
		</html>
	)
}

// 레이아웃 설정을 하면 네비게이션 바가 레이아웃을 통해 적용된 것을 확인할 수 있다.
export default function RootLayout({children}) {
	return(
		<html>
			<head>
				<title> 레이아웃 title </title>
			</head>
			<body>
				<nav> 레이아웃 네비게이션 </nav>
				{children}
			</body>
		</html>
	)
}

 

 

리액트 서버 컴포넌트

app/ 디렉토리 내부의 모든 컴포넌트는 추가 작업 없이 기본값을 RSC(리액트 서버 컴포넌트)를 사용하여 서버사이드 렌더링을 통해(서버에서만 컴포넌트를 렌더링하고) 클라이언트에 전송되는 자바스크립트의 양을 줄여 초기 페이지 로딩 포퍼먼스를 더 빠르게 수행 가능하다. 이전에는 클라이언트단에서 JavaScript 번들 크기에 영향을 주었던 큰 종속성을 완전히 서버에 남아 성능이 향상될 수 있습니다.

 

 

스트리밍

스트리밍은 app/ 디렉토리에서 loading.js라는 예약 파일을 생성하여 사용자가 렌더링 되기 이전에 로딩 중인 화면을 표시할 수 있는 기능으로, 스피너 같은 로딩 화면들을 구현하여 적용할 수 있습니다.

 

 

 

Data Fetching

❗️Next.js에서 데이터 fetching 을 위해 getServerSideProps나 getStaticProps을 사용했지만 Next.js 13부터는 더이상 이 문법을 사용하지 않습니다.

export async function getServerSideProps(){
    const res = await fetch('jsonplaceholder/todos');
    const data = await res.json();
    return { props: { todos: data } };
}

export default function Home ({todos}) {

}

 

Next.js 13에서부터는 위 문법을 사용하면 아래 error가 발생하게 됩니다.

error - Error: getServerSideProps is not supported in app/ ...

Next.js 13 문법에 맞게 코드를 작성하기 위해서는 아래 처럼 데이터 패칭 함수를 선언한 뒤, use() 로 감싸주면 됩니다.

import { **use** } from 'react';

export async function getData(){
    const res = await fetch('jsonplaceholder/todos');
    const data = await res.json();
    return data;
}

export default function Home () {
	const data = **use**(**getData()**);
	return <div>{data.todo}</div>;
}

기존 문법인 getServerSideProps, getStaticProps와 유사한 기능을 수행하기 위해 fetch 구문의 URL 뒤에 cache 옵션 값을 설정하면 보다 편리하게 구현할 수 있는데,

아래 코드를 통해 fetch 요청을 자동으로 중복 제거하고 컴포넌트 레벨에서의 fetch, 캐싱, 데이터 재검증을 제공합니다.

이는 SSG(정적 사이트 생성), SSR(서버 사이드 렌더링), ISR(점진적 정적 재생성)을 하나의 API로 처리할 수 있게 합니다.

export async function getData(){
    const res = await **fetch**(**'jsonplaceholder/todos'**, {
			**cache: "force-cache", // getStaticProps**
			**cache: "no-store",    // getServerSideProps
			next: { revalidate: 10 } // getStaticProps with the `revalidate` option**
		});
    const data = await res.json();
    return data;
}

 

 

Turbopack

Rust 기반의 번들링 툴로 Webpack의 후속작으로,

Next.js 13과 함께 Turbopack 알파를 사용 시의 효과는 아래와 같습니다.

  • 기존 Webpack보다 700배
  • Vite보다 10배 빠르게 JavaScript를 필요한 파일로 컴파일
  • Webpack보다 4배 빠른 콜드 스타트 제공

 

Turbopack은 개발에 필요한 최소한의 assets만 번들로 제공하므로 시작 시간이 매우 빠릅니다.

3,000개의 모듈이 있는 응용 프로그램에서 Turbopack은 부팅하는 데 1.8초, Vite는 11.4초 , Webpack은 16.5초가 걸림

→ Turbopack는 현재 Next dev에서만 지원되며, 빠른 시일내에 next build에서도 지원 추가될 예정입니다.

 

 

 

next/Image

성능 개선된 이미지

import Image from "next/image";
import testImage from "./testImage.png";

	return (
		<div>
			<Image alt="test_image" src={testImage}></Image>
		</div>
	);
}
  • Image 컴포넌트를 통해서 이미지 파일을 추가하고, 이를 통해 이미지가 자동 최적화가 이루어집니다.
    • Layout Shift 발생을 방지하기 위해 이미지의 width & height를 설정하는 작업을 Next.js 13 버전에서 자동으로 처리해주기 때문에 최적화에 유용합니다. ( 이미지 로드가 느릴 경우 기존 레이아웃이 밀려나는 현상 )
  • 또한 alt 속성을 필요로 하기 때문에 웹 접근성 향상이 되었습니다.

 

 

 

next/font

font 역시도 자동으로 Layout Shift가 방지되며, Next.js 13 버전부터 구글 폰트가 내장되어 브라우저에서 구글 폰트 요청을 별도로 하지 않아도 사용할 수 있습니다.

 

사용 방법은 아래와 같으며, 커스텀 폰트 역시 같은 방법으로 사용할 수 있습니다.

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

const inter = Inter();

<html className={inter.className}>
import localFont from '@next/font/local';

const myFont = localFont({ src: './my-font.woff2' });

<html className={myFont.className}>

 

 

next/link

  • 기존 : <Link> 태그를 사용하기 위해 자식요소로 <a> 태그 작성 필수

  • Next 13 :  <Link>는 항상 <a>를 렌더링하고 있어 기본 태그에 props를 전달할 수 있게 되었습니다.
    • 12.2 버전에서 실험적 옵션으로 추가된 기능이지만, 지금은 기본 옵션으로 내장되었습니다.

  • Next.js 13의 link로 업그레이드를 위해 자동으로 코드베이스를 업데이트하는 codemod를 제공하니 이 점도 참고 바랍니다!
npx @next/codemod new-link ./pages // ./pages 경로에서 codemod를 실행

 

 

|  주요 변경사항

  • 최소 요구 리액트 버전 : `17.0.2` → `18.2.0`으로 향상

  • 최소 요구 Node.js 버전 : `12.22.0`에서 `14.6.0`으로 향상 (12.x 버전의 지원 종료에 따른 업데이트 사항)

  • swcMinify 설정 기본 값 : false →  true로 변경 (참고 : Next.js Compiler)

  • `next/image` →  `next/legacy/image`로, `next/future/image` → `next/image`로 변경되었습니다.
    • codemod로 자동으로 안전하게 import문을 수정할 수 있습니다.

  • next/link의 자식으로 <a>를 가질 수 없습니다. 
    • legacyBehavior 속성을 통해 기존 코드를 유지하거나 <a>를 없애는 방식으로 업그레이드를 진행하면 됩니다.
    • codemod로 자동으로 코드를 업그레이드 할 수 있습니다.

  • User-Agent가 봇일 경우, 더 이상 경로들이 prefetch 되지 않습니다.

  • 지원 종료된 target 옵션이 next.config.js에서 제거 되었습니다.

  • 지원 브라우저에서 Internet Explorer가 제거되고, 최신 브라우저를 타겟으로 설정했습니다.
    • 아래 Browserslist를 사용하여 대상 브라우저를 변경할 수 있습니다.
      • 크롬 64+
      • 엣지 79+
      • 파이어폭스 67+
      • 오페라 51+
      • 사파리 12+

 

 

Posted by Ang

 

 

'Front' 카테고리의 다른 글

한글 도메인 주소가 DNS에 등록 & 처리되는 과정  (0) 2022.01.06
Next js 맛보기  (0) 2021.11.10
M1 맥북 - VS code 및 도커 설치  (0) 2021.11.08
M1 맥북 - Nodejs, npm & yarn 설치  (0) 2021.11.06
🛰 API 호출로 프로젝트에 필요한 데이터 GET해오는 방법 (Feat. 프론트앤드, React)  (0) 2021.08.30

관련글

댓글 0

티스토리툴바