✅ Next.js project 생성
NodeJS 프로젝트 초기화 및 package.json 파일 생성
npm init -y
react, next, react-dom 최신 버전 설치
npm install react@latest next@latest react-dom@latest
or
npx create-next-app@latest
✅ App router
Routing
- Pages Router: 디렉토리 + 파일 이름
- App Router: 디렉토리 이름 + page.jsx
Layout
- Pages Router: _app.js + Layout 패턴 사용
- App Router: layout.jsx
page.tsx
Next.js 12에서의 index.tsx 역할
not-found.tsx
404 페이지를 커스텀하기 위한 파일
layout.tsx
레이아웃을 위한 파일(필수 파일로 삭제되면 npm run dev시 다시 자동 생성됨)
loading.tsx
server component에서 fetching을 하는 동안 걸리는 로딩 등의 상황에서 대체하여 보여줄 수 있는 로딩화면을 커스텀하기 위한 파일
usePathname
현재 URL의 pathname을 읽을 수 있게 해주는 클라이언트 컴포넌트 훅
"use client"
클라이언트 컴포넌트를 사용하려면 파일 상단, import 위에 React "use client" 지시어를 추가하면 됩니다.
"use client"은 서버와 클라이언트 컴포넌트 모듈 간의 경계를 선언하는 데 사용됩니다.
즉, 파일에 "use client"을 정의하면 하위 컴포넌트를 포함하여 해당 파일로 가져온 다른 모든 모듈이 클라이언트 번들의 일부로 간주됩니다.
metadata
export const metadata: Metadata = {
title: {
template: "%s | Next Movies",
default: "Next Movies",
},
description: "The best movies on the best framework",
};
<Head> 컴포넌트 대신 metadata라는 이름의 객체를 export 해주면 된다.
params, searchParams
Next.js 15 버전부터는 params 및 searchParams는 promise이므로 값에 접근하려면 async/await 또는 React의 use함수가 필요합니다.
(아래처럼 수정 필요)
const Page = async ({ params }: {
params: Promise< { slug: string } >
}) => {
const slug = (await params).slug;
return < div >My Post: {slug}< /div >
}
fetch
Next.js는 기본 웹 fetch() API를 확장하여 서버의 각 요청이 자체 영구 캐싱 의미를 설정할 수 있도록 합니다.
(이제 자체적으로 캐싱을 하며, api를 통한 data fetching이 더이상 필요없고 server component에서 fetch를 직접 사용할 수 있으며 DB와도 소통이 가능하다.)
Next.js 15 버전부터는 기본 캐싱이 안되기 때문에 캐싱을 확인하시려면 아래처럼 fetch의 두 번째 인자의 cache옵션을 "force-cache"로 바꿔주시면 됩니다.
const response = await fetch(`${API_URL}/${movieId}`, {
cache: "force-cache",
});
<Suspense>
Page 단위 로딩 => loading.tsx
서버 컴포넌트 단위 로딩 => Suspense
<Suspense fallback="Loading...">
<WhateverComponent/>
</Suspense>
error.tsx
data fetching 중 에러가 생겼을 때 보여줄 화면 커스텀하는 파일
global-error.tsx: 루트 레이아웃이나 템플릿의 오류를 처리
generateMetadata()
메타데이터 객체(metadata) 및 generateMetadata 함수는 서버 컴포넌트에서만 지원됩니다.
동일한 경로에서 메타데이터 객체와 generateMetadata 함수를 모두 export 할 수는 없습니다. (둘 중 하나만 사용 가능)
현재 generateMetadata내에서 로딩이 느린 fetch를 동작 시 loading.tsx도 보여주지 못하고 페이지가 아무것도 보여주지 못하는 이슈가 있다.
(generateMetadata가 동작하는 동안에는 Suspense 기반 로딩 UI도 차단되므로 실제 로딩 표시가 안 됨.)
prefetch
<Link>의 prop. prefetch를 추가할 시 클릭되기 전에 스크롤을 하여 뷰포트에 노출되면 미리 data를 fetch 해놓는다.
(현재는 prefetch의 값이 true가 default다.)
'♣️ Next.js 14' 카테고리의 다른 글
| Next.js 14 - Middleware, Matcher (0) | 2025.12.03 |
|---|---|
| Next.js 14 - useFormState(useActionState) (0) | 2025.09.17 |
| Next.js 14 - useFormStatus (0) | 2025.09.17 |
| Next.js 14 - Server Action (0) | 2025.09.17 |
| Next.js 14 - api route (0) | 2025.09.17 |