[Next.js] App Router 공식 튜토리얼 톺아보기

Next.js에서 제공하는 Learn Next.js App Router 튜토리얼을 부연 설명과 함께 한국어로 정리해 봤다. 공식 가이드는 총 16개 챕터로 구성되어 있지만, 이번 포스팅에선 프로젝트 세팅을 다루는 챕터 1과 CSS 스타일링 방법을 설명하는 챕터 2는 생략했다.

Optimizing Fonts and Images

Cumulative Layout Shift(CLS, 누적 레이아웃 이동)는 구글이 웹사이트의 성능과 사용자 경험을 평가하는 데 사용하는 지표로, 페이지 로드 중 레이아웃 이동으로 인해 발생하는 사용자 경험의 불편함을 측정한다.

예를 들어, 브라우저가 폴백(fallback) 폰트나 시스템 폰트로 텍스트를 먼저 렌더링 한 뒤 사용자 지정 폰트로 교체할 때 텍스트 크기, 간격 또는 레이아웃이 변경되어 요소가 이동하는 현상이 발생할 수 있다. 이러한 레이아웃 이동의 빈도와 심각도를 평가하는 것이 CLS의 목적인 것.

Next.js의 next/font 모듈을 사용하면 빌드 시점에 폰트 파일을 다운로드하여 다른 정적 에셋과 함께 호스팅 한다. 즉, 사용자가 웹애플리케이션을 방문할 때 성능에 영향을 줄 수 있는 폰트 관련 추가 네트워크 요청이 없다는 것을 의미한다.

Adding a primary font

일반적으로 /app/ui/fonts.ts 같은 파일을 만들어서 애플리케이션 전체에 사용할 글꼴을 정의한다. 아래는 next/font/google 모듈에서 Inter 폰트를 불러온 후 latin 서브셋을 지정한 예시.

// app/ui/fonts.ts
import { Inter } from 'next/font/google';

// 폰트 파일은 다양한 언어와 문자(글리프)를 포함하고 있어 크기가 커질 수 있다.
// subsets 옵션을 사용하면 필요한 문자 세트만 포함하도록 제한하여 파일 크기를 줄일 수 있다.
// 아래는 라틴 문자 세트만 포함된 Inter 폰트를 가져온다.
export const inter = Inter({ subsets: ['latin'] });

그런 다음 <body> 엘리먼트에 폰트를 추가한다. 폰트를 body 요소에 추가했으므로 애플리케이션 전체에 적용된다. 참고로 antialiased Tailwind 클래스는 텍스트 렌더링을 부드럽게 만들어 글자를 더 깔끔하게 렌더링 해준다.

// app/layout.tsx

import '@/app/ui/global.css';
import { inter } from '@/app/ui/fonts';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={`${inter.className} antialiased`}>{children}</body>
    </html>
  );
}

특정 요소에 secondary font를 적용할 수도 있다. 아래는 Lusitana 폰트를 <p> 태그에만 적용한 예시.

// app/ui/fonts.ts

import { Inter, Lusitana } from 'next/font/google';

export const inter = Inter({ subsets: ['latin'] });

export const lusitana = Lusitana({
  weight: ['400', '700'],
  subsets: ['latin'],
});

// app/page.tsx

// ...
import { lusitana } from "@/app/ui/fonts";

export default function Page() {
  return (
    // ...
    <p
      className={`${lusitana.className} text-xl text-gray-800 md:text-3xl md:leading-normal`}
    >
      {/* ... */}
    </p>
    // ...
  );
}

Why optimize images?

최상위 레벨 /public 폴더에 이미지 같은 파일을 포함시키면, Next.js가 이를 참조하여 정적 파일로 제공할 수 있다. 일반적인 HTML에선 아래처럼 이미지를 경로를 추가하여 사용한다.

<img
  src="/hero.png"
  alt="Screenshots of the dashboard project showing desktop version"
/>

하지만 위처럼 <img> 태그를 사용하면 다양한 디바이스 크기에 따라 이미지를 적절히 조정해야 하고, 레이아웃 시프트 방지, 이미지 지연 로딩 처리 등 최적화를 수동으로 관리해야 하는 불편함이 있다.

Next.js에서 제공하는 <Image> 컴포넌트를 사용하면 아래와 같은 이미지 최적화를 자동으로 진행해 준다.

레이아웃 시프트 방지: 이미지를 로드할 때 발생하는 레이아웃 이동 현상 방지
이미지 사이즈 자동 조정: 기기 뷰포트 크기에 따라 적합한 사이즈의 이미지 전송
지연 로딩(Lazy Loading) 기본값으로 제공
WebP, AVIF 등 모던 이미지 포맷으로 제공 (브라우저 지원 시)

아래는 <Image> 컴포넌트 사용 예시. 레이아웃 시프트를 방지하기 위해 width, height 지정을 권장하며, 원본 이미지의 가로/세로 비율(aspect ratio)에 맞게 값을 설정해야 한다.

import AcmeLogo from "@/app/ui/acme-logo";
import { ArrowRightIcon } from "@heroicons/react/24/outline";
import Link from "next/link";
import { lusitana } from "@/app/ui/fonts";
import Image from "next/image";

export default function Page() {
  return (
    // ...
    <div className="flex items-center justify-center p-6 md:w-3/5 md:px-28 md:py-12">
      <Image
        src="/hero-desktop.png"
        width={1000}
        height={760}
        className="hidden md:block"
        alt="Screenshots of the dashboard project showing desktop version"
      />
    </div>
    //...
  );
}

💡 hidden md:block 클래스가 적용됐으므로 모바일에선 숨김 처리되고, md 사이즈(≥ 768px)부터 보인다.

Creating Layouts and Pages

Next.js에서 세그먼트(Segment)는 페이지 경로의 한 부분을 구성하는 폴더 또는 파일을 의미한다. 예를 들어 /dashboard/settings 경로에서 dashboard와 settings가 각각 세그먼트다.

Next.js는 폴더를 사용해서 중첩 경로를 생성하는 파일 시스템 라우팅
각 폴더는 URL 세그먼트와 매핑되는 라우트 세그먼트 의미

각 경로에 대해 layout.tsx, page.tsx 파일을 사용하여 별도의 UI를 만들 수 있음
레이아웃 사용하면 내비게이션 시 page 컴포넌트만 업데이트되고 layout은 다시 렌더링 안됨 → 부분 렌더링
라우트 세그먼트별로 코드 자동 분할 → 페이지 분리
프로덕션 환경에서 Link 컴포넌트가 브라우저 뷰포트에 나타나면 백그라운드에서 링크된 경로의 코드를 자동으로 미리 가져옴

Rendering

Static Rendering: 빌드 타임 또는 재검증(revalidating) 시 데이터 패칭과 렌더링을 수행하는 방식. 이미 생성된 HTML을 캐싱하여 제공하므로, 이후 방문하는 유저는 미리 렌더링 된 정적인 콘텐츠를 빠르게 받을 수 있음.
Dynamic Rendering: 요청 시점(Request Time)에 콘텐츠를 렌더링 하는 방식. 실시간 데이터, 사용자 맞춤형(personalized) 콘텐츠, 쿠키, URL Search Parameters 등을 활용하여 클라이언트별 동적인 응답을 생성함.

Streaming

데이터를 점진적으로 클라이언트로 전송하여 초기 렌더링 시간을 줄여주는 기능. 데이터 로드 시간이 길거나 점진적 로드가 필요한 경우 사용.

Streaming: 라우트를 작은 청크로 나누고, 준비되는 대로 서버에서 클라이언트로 점진적으로 전송할 수 있게 해주는 데이터 전송 기술. 스트리밍은 페이지 레벨의 loading.tsx 파일 혹은 <Suspense> 컴포넌트를 사용해서 구현.

loading.tsx 파일을 이용해 페이지 콘텐츠가 로드되는 동안 대체로 표시할 폴백 UI를 만들 수 있음
loading.tsx에 추가하는 모든 UI는 정적 파일의 일부로 포함되어 먼저 전송되고, 나머지 동적 콘텐츠가 서버에서 클라이언트로 스트리밍 됨
상위 레벨에 loading.tsx 파일을 두면 해당 레벨 이하의 page에 로딩 상태가 공통적으로 적용됨. Route Groups(소괄호) 폴더를 사용해 page.tsx, loading.tsx를 특정 그룹 폴더 안으로 옮기면, 해당 폴더 레벨에만 적용되고 다른 하위 레벨에는 영향 안 미침

위 같은 폴더 구조에서 loading.tsx는 /dashboard 경로에만 영향을 줌

괄호 ()를 사용하여 새 폴더를 만들면(라우트 그룹) URL 경로 구조에 영향을 주지 않고 파일을 논리적 그룹으로 구성할 수 있음.
예를 들어 /dashboard/(overview)/page.tsx 경로는 /dashboard가 됨. 라우트 그룹 기능을 사용해서 (marketing), (shop) 등의 섹션을 생성하면 URL 경로 구조를 변경하지 않고 파일을 논리적으로 구성할 수 있음.
Suspense를 사용해서 스트리밍을 더 세분화할 수 있으며, 같은 섹션으로 분류되는 컴포넌트들을 동일한 서스펜스로 그룹핑해서 작성할 수도 있음.

<Suspense>
  <Comp1 />
  <Comp2 />
</Suspense>

Partial Prerendering (PPR)

정적 콘텐츠를 미리 생성하고, 나머지는 동적으로 로드하여 정적 데이터와 동적 데이터를 결합. 정적 콘텐츠와 동적 콘텐츠가 혼합된 경우 사용.

dynamic function(데이터베이스 쿼리처럼 런타임시 동적으로 실행되어 결과를 반환하는 함수)을 라우트에서 호출하면 해당 라우트는 동적으로 처리됨
정적 라우트 Shell(뼈대) 미리 로딩 → 빠른 초기 로드 보장
정적 Shell은 동적 콘텐츠가 비동기적으로 로드될 수 있도록 별도 Hole(공간)을 남김
비동기 Hole은 병렬로 스트리밍 돼서 페이지 전체 로드 시간을 줄임
부분 프리렌더링(PPR)은 Suspense를 사용하여 조건을 충족할 때까지 애플리케이션 렌더링을 지연시킴

Suspense fallback은 정적 콘텐츠와 함께 초기 HTML 파일에 임베드됨
빌드 시 정적 콘텐츠가 미리 렌더링 돼서 정적 Shell을 만듦
동적 콘텐츠의 렌더링은 사용자가 해당 경로를 요청할 때까지 지연됨
Suspense는 정적 코드와 동적 코드 사이의 경계로 사용됨. Suspense로 컴포넌트를 감싼다고 해서 컴포넌트 자체를 동적으로 만드는 것이 아님.

PPR은 아직 실험 단계. 아래 설정만으로 활성화할 수 있음.

// app/dashboard/layout.tsx
// ppr 옵션 활성화

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    ppr: 'incremental',
  },
};
 
export default nextConfig;

// app/dashboard/layout.tsx
// 레이아웃 파일에 experimental_ppr 옵션 추가

import SideNav from '@/app/ui/dashboard/sidenav';
 
export const experimental_ppr = true;
 
// ...

데이터 패칭 최적화 방법 6가지

DB를 애플리케이션 코드와 동일한 위치에 배치하여 서버/DB 간 지연 시간을 줄임
SQL을 사용하여 필요한 데이터만 가져와서 전송 데이터를 줄이고, 메모리 내 데이터 변환에 필요한 자바스크립트를 최소화함
자바스크립트를 이용하여 데이터를 병렬로 가져와서 성능 최적화
스트리밍을 이용해 느린 데이터 요청이 전체 페이지를 차단하지 않도록 하고, 일부 데이터를 먼저 로드하여 UI를 빠르게 상호작용 할 수 있도록 함
데이터 패칭 코드를 컴포넌트 내에서 진행하도록 해서 다이나믹 라우트 부분만 따로 분리

Adding Search and Pagination

URL params를 이용한 검색 구현 과정
1. 유저 입력값 획득
2. URL 업데이트
3. URL ⇆ Input 필드 동기화
4. search query를 반영한 테이블 업데이트
아래는 테이블 검색 구현 예시. Search 클라이언트 컴포넌트에서 새로운 입력값을 받아 search parameter를 업데이트하면 Page 서버 컴포넌트에서 props로 받아서 이 값을 이용해 테이블을 업데이트하는 방식.

// invoices/page.tsx

interface PageProps {
  searchParams?: Promise<{
    query?: string,
    page?: string,
  }>;
}

// 페이지 서버 컴포넌트는 params, searchParams를 props로 받음
export default async function Page(props: PageProps) {
  const searchParams = await props.searchParams;
  const query = searchParams?.query || "";
  const currentPage = Number(searchParams?.page || 1);

  return (
    <div className="w-full">
      {/* ...생략 */}
      <div className="mt-4 flex items-center justify-between gap-2 md:mt-8">
        <Search placeholder="Search invoices..." />
        <CreateInvoice />
      </div>
      <Suspense key={query + currentPage} fallback={<InvoicesTableSkeleton />}>
        <Table query={query} currentPage={currentPage} />
      </Suspense>
      {/* ...생략 */}
    </div>
  );
}

// app/ui/search.tsx

"use client";

import { usePathname, useSearchParams, useRouter } from "next/navigation";
// ...

export default function Search({ placeholder }: { placeholder: string }) {
  // 현재 URL의 search parameter 조회
  const searchParams = useSearchParams();
  // 현재 URL의 pathname 조회
  const pathname = usePathname();
  // 페이지 새로고침 없이 현재 URL 대체
  const { replace } = useRouter();

  const handleSearch = useDebouncedCallback((term: string) => {
    const params = new URLSearchParams(searchParams);
    if (term) params.set("query", term);
    else params.delete("query");

    replace(`${pathname}?${params.toString()}`);
  }, 300);

  return (
    <div className="relative flex flex-1 flex-shrink-0">
      <input
        className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
        placeholder={placeholder}
        onChange={(e) => handleSearch(e.target.value)}
        defaultValue={searchParams.get("query")?.toString()}
      />
      {/* ... */}
    </div>
  );
}

Mutating Data

React 서버 액션은 비동기 코드를 서버에서 직접 실행할 수 있게 해 줌. 데이터를 변경하기 위해 API 엔드포인트를 생성하지 않고 서버에서 실행되는 비동기 함수를 작성하여 클라이언트/서버 컴포넌트에서 호출할 수 있게 해 줌
리액트에선 <form> 요소의 action 어트리뷰트를 통해서 액션을 호출할 수 있음. 이 액션은 자동으로 캡처된 데이터를 포함하는 네이티브 FormData 객체를 받음.

export default function Page() {
  // Action
  async function create(formData: FormData) {
    "use server";
    // mutate data 로직...
  }

  // action 어트리뷰트를 사용해서 action 호출
  return <form action={create}>{/* ... */}</form>;
}

위처럼 서버 컴포넌트에서 서버 액션을 호출하면 점진적 향상이 가능함. 즉, 클라이언트에서 자바스크립트가 비활성화되어 있어도 폼은 작동함. 💡 점진적 향상이란? 핵심 로직을 서버에서 처리하므로 클라이언트 환경에 제약(네트워크 상태가 좋지 않은 등)이 있더라도 기본적인 기능이 유지됨.
서버 액션은 Next.js 캐싱과도 깊이 통합되어 있음. 서버 액션을 통해 폼이 제출되면 데이터를 변경할 수 있을 뿐만 아니라 revalidatePath, revalidateTag와 같은 API를 사용해서 관련 캐시를 다시 검증할 수 있음.

서버 액션을 활용한 /create 로직

💡 폼 생성 플로우

유저 입력 필드 값을 조회하기 위해 폼 생성
서버 액션 생성 후 입력 폼에서 호출
서버 액션 내부에서 formData 객체에 있는 데이터 추출
데이터베이스에 삽입할 데이터를 검증하고 준비
데이터 삽입 후 오류 처리
캐시 재검증 후 사용자 인보이스 페이지로 리디렉션

① 라우터 정의 및 폼 필드에 사용할 목록 데이터 조회 후 <Form /> 컴포넌트로 전달

// app/dashboard/invoices/create/page.tsx

// dashboard/invoices/create 라우터 정의
export default async function Page() {
  // [{ id: '...', name: '...' }, { ... }]
  const customers = await fetchCustomers();

  return (
    <main>
      {/* ... */}
      <Form customers={customers} />
    </main>
  );
}

② 양식을 제출할 때 호출될 서버 액션 생성

// app/lib/actions.ts

// use server 지시어를 추가하면 파일 내에서 내보낸 모든 함수를 서버 액션으로 표시
// 서버 함수는 클라이언트/서버 컴포넌트에서 사용할 수 있음
"use server";

export async function createInvoice(formData: FormData) {
  // ...
}

③ <Form /> 컴포넌트 action 속성에 createInvoice 액션 호출 함수 할당

// app/ui/invoices/create-form.tsx

// ...
import { createInvoice } from "@/app/lib/actions";

export default function Form({ customers }: { customers: customerField[] }) {
  return <form action={createInvoice}>{/* ... */}</form>;
}

HTML <form> 태그의 action 속성은 데이터 전송을 위한 URL을 지정하는 데 사용하지만, 리액트 <form> 태그의 action 속성은 내부적으로 POST API 엔드포인트를 만들어주는 역할을 함.

④ formData에서 데이터 추출 → 데이터 검증/저장 → 캐시 무효화/리다이렉트

// app/lib/actions.ts

"use server";

// ...

const FormSchema = z.object({
  id: z.string(),
  customerId: z.string(),
  amount: z.coerce.number(),
  status: z.enum(["pending", "paid"]),
  date: z.string(),
});

// FormSchema 스키마에서 id, date 필드 제외
const CreateInvoice = FormSchema.omit({ id: true, date: true });

export async function createInvoice(formData: FormData) {
  // parse 메서드로 스키마 검증
  const { customerId, amount, status } = CreateInvoice.parse({
    customerId: formData.get("customerId"),
    amount: formData.get("amount"),
    status: formData.get("status"),
  });

  const amountInCents = amount * 100; // 금액을 cents 단위로 변환
  const [date] = new Date().toISOString().split("T"); // ISO 문자열에서 날짜 부분만 추출

  // 데이터베이스에 새 인보이스 데이터 삽입
  await sql`
    INSERT INTO invoices (customer_id, amount, status, date)
    VALUES (${customerId}, ${amountInCents}, ${status}, ${date})
  `;

  // Next.js는 기본적으로 사용자 브라우저에 현재 페이지와 관련된 경로 데이터를 저장함
  // 즉, 사용자가 이동한 경로의 정보를 브라우저가 잠깐 기억하고 있는 것
  // 이를 Client-Side Router Cache라고 부름
  // revalidatePath 메서드를 사용하면 캐시를 강제로 무효화함
  revalidatePath("/dashboard/invoices"); // /dashboard/invoices 경로의 클라이언트 캐시 무효화
  redirect("/dashboard/invoices"); // 무효화 후 해당 경로로 리다이렉트
}

동적 라우트를 활용한 /update 로직

💡 폼 업데이트 로직 플로우

URL에서 변수 값을 추출하기 위해 동적 라우트 세그먼트 생성
페이지 컴포넌트에서 인보이스 ID 획득
데이터베이스에서 해당 인보이스 데이터 조회
조회한 인보이스 데이터로 폼 양식 채우기
폼 데이터를 기반으로 데이터베이스의 인보이스 정보 업데이트

폴더 이름을 대괄호로 감싸면 동적 라우트 세그먼트를 생성할 수 있다. invoices/[id]/edit/page.tsx로 정의하면 해당 URL로 접근했을 때 page.tsx 컴포넌트에서 props.params.id를 통해 id 값을 조회할 수 있다.

// app/dashboard/invoices/[id]/edit/page.tsx

// ...
import Form from '@/app/ui/invoices/edit-form';

interface EditInvoicePageProps {
  params: Promise<{ id: string }>
}

export default async function Page(props: EditInvoicePageProps) {
  const params = await props.params;
  const id = params.id;

  const [invoice, customers] = await Promise.all([
    fetchInvoiceById(id),
    fetchCustomers(),
  ]);

  return (
    <main>
      <Breadcrumbs
        breadcrumbs={[
          {label: 'Invoices', href: '/dashboard/invoices'},
          {
            label: 'Edit Invoice',
            href: `/dashboard/invoices/${id}/edit`,
            active: true,
          },
        ]}
      />
      <Form invoice={invoice} customers={customers}/>
    </main>
  );
}

리액트에서 <form> 태그 action 속성에 전달한 핸들러는 formData를 인자로 받는다. 아래처럼 bind 메서드를 사용하여 첫 번째 인자를 고정해 두면 핸들러를 더 간결하게 작성할 수 있다.

// app/ui/invoices/edit-form.tsx

'use client';

// ...
import { updateInvoice } from '@/app/lib/actions';

export default function EditInvoiceForm({
  invoice,
  customers,
}: {
  invoice: InvoiceForm;
  customers: CustomerField[];
}) {
  // updateInvoice 함수의 첫 번째 인자(id)를 invoice.id로 고정하여 새로운 함수 생성
  const updateInvoiceWithId = updateInvoice.bind(null, invoice.id);

  return (
    <form action={updateInvoiceWithId}>
      { /* ... */ }
    </form>
  );
}

Handling Errors

Next.js에서 redirect() 함수는 내부적으로 에러를 던지는 방식으로 동작하여 프로세스를 중단하고 브라우저를 특정 URL로 리다이렉트 한다. 따라서 redirect()는 try/catch 블록 안에서 호출될 경우, catch 블록에 의해 포착되어 리다이렉트가 의도대로 실행되지 않을 수 있다. 이를 방지하기 위해 redirect()는 try/catch 블록 바깥에서 호출해야 한다.

// app/lib/actions.ts

export async function updateInvoice(id: string, formData: FormData) {
  const { customerId, amount, status } = UpdateInvoice.parse({
    customerId: formData.get('customerId'),
    amount: formData.get('amount'),
    status: formData.get('status'),
  });

  const amountInCents = amount * 100;

  try {
    await sql`
        UPDATE invoices
        SET customer_id = ${customerId}, amount = ${amountInCents}, status = ${status}
        WHERE id = ${id}
      `;
  } catch (error) {
    return { message: 'Database Error: Failed to Update Invoice.' };
  }

  revalidatePath('/dashboard/invoices');
  redirect('/dashboard/invoices');
}

error.tsx 파일은 라우트 세그먼트의 에러 경계를 정의한다. 에러 경계는 특정 컴포넌트 또는 세그먼트에서 발생한 에러를 포괄적으로 처리하며, 상위로 에러가 전파되지 않도록 막는 역할을 한다.

// app/dashboard/invoices/error.tsx

"use client";

// ...

interface ErrorProps {
  /** 자바스크립트 native Error object.
   * digest 선택적 속성은 에러의 고유 식별자를 제공하여 디버깅/로깅에 활용된다.
   * */
  error: Error & { digest?: string };
  /** 에러 바운더리 리셋 함수. 함수 호출시 라우트 세그먼트 리렌더링 */
  reset: () => void;
}

export default function Error({ error, reset }: ErrorProps) {
  useEffect(() => {
    // Optionally log the error to an error reporting service
    console.error(error);
  }, [error]);

  return (
    <main className="flex h-full flex-col items-center justify-center">
      ...
    </main>
  );
}

만약 invoices/[id]/edit/page.tsx에서 에러가 발생하면 동일 혹은 상위 세그먼트에 정의된 error.tsx가 호출된다. 에러는 가장 가까운 error.tsx 파일에서 처리되므로 파일 구조에서의 위치가 중요하다.

📦 app/
└─ invoices/
   ├─ [id]/
   │  └─ edit/
   │     └─ page.tsx
   ├─ error.tsx
   └─ page.tsx

한편 Next.js에서 제공하는 notFound() 핸들러를 사용하면 404 페이지로 리디렉션 시킬 수 있다.

// app/dashboard/invoices/[id]/edit/page.tsx

// ...
import { notFound } from "next/navigation";

export default async function Page(props: { params: Promise<{ id: string }> }) {
  const params = await props.params;
  const id = params.id;
  const [invoice, customers] = await Promise.all([
    fetchInvoiceById(id),
    fetchCustomers(),
  ]);

  if (!invoice) notFound();

  // ...
}

별도의 not-found.tsx 파일을 만들어서 커스텀 404 페이지를 구현할 수도 있다. 만약 page.tsx 컴포넌트 내부에서 notFound()를 호출했다면 동일 세그먼트에 있는 not-found.tsx 파일을 렌더링 한다.

📦 app/
└─ invoices/
   ├─ [id]/
   │  └─ edit/
   │     ├─ page.tsx
   │     └─ not-found.tsx
   ├─ error.ts
   └─ page.tsx

Improving Accessibility

Client-Side validation

클라이언트 사이드에선 HTML5 표준에 정의된 required 같은 어트리뷰트를 통해서 기본적인 폼 유효성 검사를 수행할 수 있다.

<input
  id="amount"
  name="amount"
  type="number"
  placeholder="Enter USD amount"
  className="peer block w-full rounded-md border border-gray-200 py-2 pl-10 text-sm outline-2 placeholder:text-gray-500"
  required
/>

하지만 클라이언트 사이드의 유효성 검사는 사용자가 브라우저 개발자 도구를 통해 검사를 비활성화하거나 폼 데이터를 변조할 수도 있기 때문에 서버 사이드 검증을 이용하면 이러한 보안 문제를 방지할 수 있다.

Server-Side validation

서버에서 폼을 검증했을 때의 장점

데이터를 저장하기 전에 예상된 형식인지 확인할 수 있음
악의적인 사용자가 클라이언트 측 검증을 우회할 위험을 줄일 수 있음
데이터 유효성 기준을 서버에서 일괄적으로 관리할 수 있음 (SSOT)

useActionState 훅은 폼 액션의 결과를 기반으로 상태를 업데이트해 주는 훅이다. 아직 React 19 Canary 버전에서만 지원하는 실험적인 기능이지만 Next.js 15와 함께 사용할 수 있다.

// app/lib/actions.ts

const FormSchema = z.object({
  id: z.string(),
  /** 필드가 문자열이 아닌 경우 invalid_type_error 속성 값으로 설정된 에러 메시지 반환 */
  customerId: z.string({
    invalid_type_error: "Please select a customer.",
  }),
  /**
   * z.coerce.<type>은 입력 값을 지정한 <type>으로 변환 시도.
   * 변환한 후 0보다 큰지 확인. 값이 비어있다면 기본값 0으로 설정.
   * */
  amount: z.coerce.number().gt(0, {
    message: "Please enter an amount greater than $0.",
  }),
  status: z.enum(["pending", "paid"], {
    invalid_type_error: "Please select an invoice status.",
  }),
  date: z.string(),
});

// FormSchema 스키마에서 id, date 필드 제외
const CreateInvoice = FormSchema.omit({ id: true, date: true });

export type State = {
  errors?: { customerId?: string[]; amount?: string[]; status?: string[] };
  message?: string | null;
};

// useActionState 훅의 콜백은 prevState, formData를 인자로 받는다.
export async function createInvoice(prevState: State, formData: FormData) {
  /**
   * parse: 데이터를 검증하고 유효하지 않은 경우 예외 throw
   * safeParse: 데이터를 검증하고 결과를 객체 형태로 반환. 예외를 throw 하지 않음
   * */
  const validatedFields = CreateInvoice.safeParse({
    customerId: formData.get("customerId"),
    amount: formData.get("amount"),
    status: formData.get("status"),
  });

  // If form validation fails, return errors early. Otherwise, continue.
  // 실패시: { success: false, error: [Getter] }
  if (!validatedFields.success) {
    return {
      errors: validatedFields.error.flatten().fieldErrors,
      message: "Missing Fields. Failed to Create Invoice.",
    };
  }

  // 성공시: { success: true, data: { customerId: '...', amount: '...', ... } }
  // ...
}

useActionState 반환값인 formAction 함수를 <form> 태그 action 어트리뷰트에 할당하면, 사용자 폼 제출 시 아래 과정으로 유효성 검증이 진행된다.

①클라이언트에서 폼 제출/서버로 데이터 전송 → ②createInvoice 서버 액션 실행 → ③서버에서 폼 데이터 검증 → ④유효성 검사 결과를 포함한 formState 반환 → ⑤반환한 상태를 클라이언트 state에 반영

// app/ui/invoices/create-form.tsx

import { createInvoice, State } from "@/app/lib/actions";

// useActionState 훅을 사용하기 위해 클라이언트 컴포넌트로 변경
("use client");

export default function Form({ customers }: { customers: CustomerField[] }) {
  const initialState: State = { message: null, errors: {} };
  const [state, formAction] = useActionState(createInvoice, initialState);

  return (
    <form action={formAction}>
      <div className="rounded-md bg-gray-50 p-4 md:p-6">
        <div className="mb-4">
          <label htmlFor="customer" className="mb-2 block text-sm font-medium">
            Choose customer
          </label>
          <div className="relative">
            <select
              id="customer"
              name="customerId"
              className="peer block w-full cursor-pointer rounded-md border border-gray-200 py-2 pl-10 text-sm outline-2 placeholder:text-gray-500"
              defaultValue=""
              aria-describedby="customer-error"
            >
              <option value="" disabled>
                Select a customer
              </option>
              {customers.map((customer) => (
                <option key={customer.id} value={customer.id}>
                  {customer.name}
                </option>
              ))}
            </select>
          </div>
          <div id="customer-error" aria-live="polite" aria-atomic="true">
            {state.errors?.customerId?.map((error: string) => (
              <p className="mt-2 text-sm text-red-500" key={error}>
                {error}
              </p>
            ))}
          </div>
        </div>

        {/* ... */}
      </div>
    </form>
  );
}

aria-live 속성: 콘텐츠가 동적으로 변경될 때 스크린 리더가 사용자에게 알릴지 여부. 변경된 내용이 사용자 작업을 방해하지 않을 때 읽어주도록 하려면 polite로 설정.
aria-atomic 속성: 콘텐츠 업데이트 시 스크린 리더가 변경된 부분만 읽을지, 전체 내용을 읽을지 설정. true 설정 시 전체 요소의 내용 읽음.
aria-describedby 속성: 스크린 리더가 연결된 요소의 추가 설명을 읽을 수 있도록 지정된 id를 가진 태그의 콘텐츠 참조.
fieldset 태그: 폼 내 여러 요소를 그룹화하여 논리적으로 묶는 컨테이너 역할
legend 태그: fieldset의 제목이나 설명

Adding Authentication

NextAuth 기본 설정

NextAuth.js를 사용하면 세션 관리, 로그인/로그아웃 등 인증 관련 기능의 복잡성을 대부분 추상화하여 처리할 수 있다. 이러한 기능들은 수동으로 구현할 수도 있지만, 시간이 많이 걸리고 오류가 발생하기 쉽다. NextAuth.js는 이러한 과정을 간소화하여 Next.js 애플리케이션 인증을 위한 통합 솔루션을 제공한다. NextAuth를 사용해 아이디, 패스워드 인증을 구현해 보자.

① next-auth 설치

pnpm i next-auth@beta

② secret key 생성

# 방법 1
openssl rand -base64 32
# 방법 2
npx auth secret

③ .env 파일내 AUTH_SECRET 변수에 시크릿키 할당

# JWT 키를 서명하거나 검증할 때 사용하는 키
AUTH_SECRET=your-secret-key

④ 프로젝트 루트에 auth.config.ts 파일 생성 후 커스텀 로그인 페이지, 세션 이벤트에 대한 커스텀 로직 정의

// auth.config.ts

import { NextAuthConfig } from "next-auth";

export const authConfig = {
  // 로그인 방식 정의 (OAuth, Credentials 등)
  providers: [],
  pages: {
    // NextAuth.js에서 제공하는 기본 로그인 페이지 대신 커스텀 경로 /login 사용
    signIn: "/login",
  },
  // 인증 및 세션 이벤트에 대한 사용자 정의 콜백
  callbacks: {
    // 사용자 접근 권한을 제어하는 authorized 함수
    // auth는 사용자 세션 정보를, request는 요청 데이터(URL 등)를 포함함
    authorized({ auth, request: { nextUrl } }) {
      // auth.user는 현재 세션의 사용자 정보 나타냄
      // undefined일 경우, 세션이 없거나 만료된 상태로 간주(로그아웃)
      const isLoggedIn = !!auth?.user;
      const isOnDashboard = nextUrl.pathname.startsWith("/dashboard");

      // 대시보드 페이지로 접근했고, 로그인 상태면 접근 허용
      if (isOnDashboard) return isLoggedIn;
      // 대시보드 페이지가 아니고, 로그인 상태면 리다이렉트
      else if (isLoggedIn) {
        return Response.redirect(new URL("/dashboard", nextUrl));
      }

      // true 반환시 해당 요청이 인증되었음을 의미
      // false 반환 시 기본적으로 로그인 페이지로 리다이렉트
      return true;
    },
    // 사용자가 로그인 시도시 호출. true 반환시 로그인 성공 false 반환시 로그인 실패
    signIn: async () => {
      // ...
      return true;
    },
    // JWT가 생성되거나 업데이트될 때 호출. 반환 값은 쿠키에 저장됨
    jwt: async ({ token, user }) => {
      // ...
      return token;
    },
    // jwt 콜백이 반환하는 token을 받아 세션이 확인될 때마다 호출됨. 
    // 반환하는 값은 클라이언트에서 확인 가능 (2번 이상 호출될 수 있음)
    session: async ({ session, token }) => {
      // ...
      return session;
    },
  },
} satisfies NextAuthConfig;

각 콜백의 호출 순서는 아래와 같다. 참고로 세션은 클라이언트와 서버 간 상태를 유지하기 위한 기술. 서버에 저장된 데이터를 통해 사용자의 인증 상태나 정보를 관리한다. 주로 세션 ID를 통해 클라이언트를 식별하며, 로그인 유지나 권한 확인 등에 사용한다.

사용자 로그인/회원가입: signIn → (redirect) → jwt → session
세션 업데이트: jwt → session
세션 확인: session

⑤ 미들웨어 파일 정의. 미들웨어를 사용하면 인증된 사용자만 보호된 경로에 접근할 수 있어서 보안을 강화할 수 있고, 서버 측에서 요청을 미리 차단하므로 불필요한 클라이언트 렌더링을 방지할 수 있다.

// middleware.ts

import NextAuth from "next-auth";
import { authConfig } from "./auth.config";

// NextAuth에 정의해둔 authConfig를 전달하여 인증 설정 적용
export default NextAuth(authConfig).auth;

// Next.js의 Middleware 설정을 위한 config 객체
// matcher 옵션을 적용하여 특정 경로에만 미들웨어 적용
export const config = {
  // https://nextjs.org/docs/app/building-your-application/routing/middleware#matcher
  matcher: ["/((?!api|_next/static|_next/image|.*\\.png$).*)"],
};

미들웨어는 클라이언트 요청과 서버 응답 사이에서 실행되어 데이터를 처리하거나 수정하는 함수다. 주로 인증, 요청 검증, 로깅 같은 작업을 수행하며, 요청을 다음 처리 단계로 전달하거나 특정 조건에 따라 요청을 차단할 수 있다.

Password hashing

해싱은 특정 알고리즘을 통해 데이터를 고정 길이 문자열(해시 값)로 변환하는 과정을 말한다. 비밀번호를 데이터베이스에 저장하기 전에 해싱을 적용하면, 데이터가 유출되더라도 원래 값을 복원하기 어렵기 때문에 보안이 강화된다(일반적으로 무작위 값인 솔트를 추가하여 해싱한다).

비밀번호 해싱에는 bcrypt 라는 패키지를 자주 사용한다. 하지만 bcrypt는 Node.js API를 사용하기 때문에 브라우저 환경이나 Next.js 미들웨어 환경에서는 사용할 수 없다. 이러한 제한을 해결하려면 비밀번호 검증 및 해싱 로직은 서버 환경에서 처리해야 한다. 이를 위해 서버 환경인 auth.ts 파일을 별도로 만들어서 기존 authConfig 인증 설정 확장하는 방식으로 구현할 수 있다.

// auth.ts

import NextAuth from "next-auth";
import { authConfig } from "./auth.config";

export const { auth, signIn, signOut } = NextAuth({
  ...authConfig,
  // ...
});

Next.js 미들웨어는 Vercel Edge Runtime 위에서 실행된다. 이 런타임은 V8 JavaScript 엔진 기반으로 동작하며, Web APIs를 지원하지만 Node.js API는 지원하지 않는다.

Adding the sign in functionality

ID, Password 기반 인증은 Credential 프로바이더를 사용하며, Credential의 authorize 메서드에서 클라이언트가 전달한 인증 데이터를 검증한다. 검증에 성공하면 사용자 데이터를 반환하고, 실패하면 null을 반환하여 인증 실패로 처리한다.

// auth.ts

// ...
import NextAuth from "next-auth";
import { authConfig } from "./auth.config";
import Credential from "next-auth/providers/credentials";
import bcrypt from "bcrypt";
import {sql} from "@vercel/postgres";

async function getUser(email: string): Promise<User | undefined> {
  try {
    // 이메일 기준으로 데이터베이스에서 사용자 정보 조회
    const user = await sql<User>`
      SELECT * 
      FROM users 
      WHERE email = ${email}
    `;

    return user.rows[0]; // 첫 번째 행(사용자 정보) 반환
  } catch (error) {
    console.error("Failed to fetch user:", error);
    throw new Error("Failed to fetch user.");
  }
}

// NextAuth 설정 객체에서 auth, signIn, signOut 추출
export const { auth, signIn, signOut } = NextAuth({
  ...authConfig, // 기존 인증 설정 병합
  // ID, Password 기반 인증에는 Credential 사용
  providers: [
    Credential({
      // 사용자 입력값을 검증하고 인증을 처리하는 authorize 메서드, null 반환 시 인증 실패로 처리됨
      async authorize(credentials) {
        // 클라이언트에서 전달된 인증 데이터(credentials) 검증
        const parsedCredentials = z
          .object({ email: z.string().email(), password: z.string().min(6) })
          .safeParse(credentials);

        if (parsedCredentials.success) {
          const { email, password } = parsedCredentials.data;
          // 데이터베이스에서 사용자 조회
          const user = await getUser(email);
          if (!user) return null;
          // 사용자가 입력한 비밀번호와 데이터베이스에 저장된 해시된 비밀번호 비교
          const passwordsMatch = await bcrypt.compare(password, user.password);
          // 비밀번호 일치하면 사용자 객체 반환
          if (passwordsMatch) return user;
        }

        console.log("Invalid credentials");
        return null; // null 반환 시 인증 실패 처리
      },
    }),
  ],
});

Updating the login form

actions.ts 파일에 authenticate 라는 이름의 서버 액션을 추가한다. 이 액션은 useActionState 훅의 첫 번째 인자(액션 함수)로 전달되므로, 함수 인터페이스를 고려해서 작성한다(첫 번째 인자는 이전 또는 초기 상태, 두 번째 인자는 폼 제출 시 전달되는 데이터).

// app/lib/actions.ts

"use server";

import { signIn } from "@/auth";
import { AuthError } from "next-auth";
// ...

export async function authenticate(
  prevState: string | undefined,
  formData: FormData, // 폼 데이터로 전달된 사용자 입력 값
) {
  try {
    await signIn("credentials", formData);
  } catch (error) {
    // 인증 관련 에러 처리
    if (error instanceof AuthError) {
      switch (error.type) {
        case "CredentialsSignin": // 자격 증명 에러
          return "Invalid credentials.";
        default:
          return "Something went wrong."; // 기타 인증 관련 에러
      }
    }

    throw error; // 예상치 못한 에러
  }
}

로그인 폼 컴포넌트에선 useActionState 훅에서 반환된 formAction을 <form> 요소의 action 속성에 할당하여 폼 제출 시 비동기 인증 작업이 실행되도록 한다. authenticate 액션 함수는 인증 작업 결과로 에러 메시지를 반환하는데, 이를 사용하면 필드에 오류 메시지를 동적으로 표시할 수 있다.

// app/ui/login-form.tsx

"use client";

// ...
import { authenticate } from "@/app/lib/actions";
import { useActionState } from "react";

export default function LoginForm() {
  // isPending 반환값: 비동기 작업이 진행 중인지 여부를 나타내는 불리언 값
  // true라면 authenticate 작업이 실행 중이고, 아직 완료되지 않았다는 의미
  const [errorMessage, formAction, isPending] = useActionState(
    authenticate,
    undefined,
  );

  return (
    <form className="space-y-3" action={formAction}>
      <div className="flex-1 rounded-lg bg-gray-50 px-6 pb-4 pt-8">
        <h1 className={`${lusitana.className} mb-3 text-2xl`}>
          Please log in to continue.
        </h1>
        <div className="w-full">{/* ... */}</div>
        {/* aria-disabled: 요소가 비활성화 상태임을 화면 리더기에 알리는 속성 */}
        <Button className="mt-4 w-full" aria-disabled={isPending}>
          Log in <ArrowRightIcon className="ml-auto h-5 w-5 text-gray-50" />
        </Button>
        <div
          className="flex h-8 items-end space-x-1"
          aria-live="polite"
          aria-atomic="true"
        >
          {errorMessage && (
            <>
              <ExclamationCircleIcon className="h-5 w-5 text-red-500" />
              <p className="text-sm text-red-500">{errorMessage}</p>
            </>
          )}
        </div>
      </div>
    </form>
  );
}

💡 aria-disabled: 해당 요소가 상호작용할 수 없는(비활성) 상태 임을 나타내는 ARIA 속성. true이면 요소가 비활성화 상태임을 의미함.

Adding the logout functionality

auth.ts 파일에서 반환한 signOut() 함수를 불러온 후 호출하면 로그아웃을 처리할 수 있다. 참고로 서버 액션을 지정하는 'use server' 지시어를 파일 가장 상단에 선언하면 해당 파일의 모든 export된 함수가 서버 액션으로 지정되고, 함수 내부에 선언하면 해당 함수만 서버 액션으로 동작한다.

// app/ui/dashboard/sidenav.tsx

// ...
import { signOut } from "@/auth";

export default function SideNav() {
  return (
    <div className="flex h-full flex-col px-3 py-4 md:px-2">
      {/* ... */}
      <div className="flex grow flex-row justify-between space-x-2 md:flex-col md:space-x-0 md:space-y-2">
        <NavLinks />
        <div className="hidden h-auto w-full grow rounded-md bg-gray-50 md:block"></div>
        <form
          action={async () => {
            "use server";
            await signOut();
          }}
        >
          <button className="flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3">
            <PowerIcon className="w-6" />
            <div className="hidden md:block">Sign Out</div>
          </button>
        </form>
      </div>
    </div>
  );
}

Adding Metadata

메타데이터는 웹페이지에 대한 추가 정보로, 주로 HTML의 <head> 요소에 포함된다. 사용자가 페이지를 방문할 때는 보이지 않지만 검색 엔진과 소셜 미디어 플랫폼이 웹페이지를 더 쉽게 접근하고 이해할 수 있도록 돕는다. 적절한 메타데이터는 검색 엔진이 웹페이지를 효과적으로 색인하고, 검색 결과에서 더 높은 순위에 위치할 수 있도록 지원한다.

Types of metadata

자주 사용하는 메타데이터 종류는 다음과 같다:

① Title Metadata: 브라우저 탭과 검색 엔진 결과에 표시될 페이지 제목

<title>Page Title</title>

② Description Metadata: 검색 엔진에서 페이지에 대한 설명으로 표시될 내용

<meta name="description" content="A brief description of the page content." />

③ Keyword Metadata: 페이지와 관련된 키워드. 검색 엔진에서 페이지 관련성을 높이는데 사용되는 키워드

<meta name="keywords" content="keyword1, keyword2, keyword3" />

④ Open Graph Metadata: 소셜 미디어에 공유할 때 표시될 콘텐츠

<meta property="og:title" content="Title Here" />
<meta property="og:description" content="Description Here" />
<meta property="og:image" content="image_url_here" />

⑤ Favicon Metadata: 브라우저 주소 표시줄 혹은 탭에 표시되는 아이콘(파비콘)

<link rel="icon" href="path/to/favicon.ico" />

Adding metadata

Next.js에선 아래 2가지 방법으로 메타데이터를 추가할 수 있으며, Next.js는 이를 기반으로 관련된 <head> 요소를 자동으로 생성한다.

Config-based: 코드 기반 메타데이터(layout.js 또는 page.js 파일에 정의)
1. Static Metadata Object: 정적 값으로 구성된 메타데이터를 객체 형태로 생성
2. Dynamic generateMetadata Function: 데이터를 기반으로 메타데이터를 동적으로 생성
File-based: 파일 기반 메타데이터
- favicon.ico, apple-icon.jpg, icon.jpg: 브라우저 및 디바이스 아이콘
- opengraph-image.jpg, twitter-image.jpg: 소셜 미디어 공유 시 표시되는 이미지
- robots.txt: 검색 엔진 크롤러의 크롤링 허용 및 차단 규칙
- sitemap.xml: 웹사이트 구조 정보

Favicon / Open Graph Image

favicon.ico, opengraph-image.jpg 파일을 /app 폴더에 위치시키면 Next.js가 이를 자동으로 인식하고 각각 파비콘과 OG 이미지로 사용된다. ImageResponse 생성자를 이용해서 다이나믹 OG 이미지를 만들 수도 있다.

Page title and descriptions

💡 메타데이터 객체를 export 해줘야 페이지나 레이아웃에 적용된다.

layout.js 혹은 page.js 파일에 메타데이터 객체를 추가하면 title, description 같은 페이지 정보를 정의 할 수 있다. layout.js에 정의한 메타데이터는 모든 하위 페이지로 상속된다.

// app/layout.tsx

import { Metadata } from "next";

// layout.js 또는 page.js 파일에 메타데이터 객체를 포함할 수 있음
// layout.js에서 정의된 메타데이터는 모든 하위 페이지들에 상속됨
export const metadata: Metadata = {
  // 브라우저 탭과 검색 엔진 결과에 표시될 페이지 제목
  title: "Acme Dashboard",
  // 검색 엔진에서 페이지에 대한 설명으로 표시될 내용
  description: "The official Next.js Course Dashboard, built with App Router.",
  // 메타데이터에서 상대 경로를 절대 경로로 변환하기 위한 기준 URL
  metadataBase: new URL("https://next-learn-dashboard.vercel.sh"),
};

export default function RootLayout() {
  // ...
}

만약 하위 페이지에서 별도의 메타데이터를 정의하면 부모 레이아웃의 메타데이터를 덮어쓴다. 아래 예시에선 title 메타데이터만 덮어쓰고 나머지 속성은 부모로부터 상속받는다.

// app/dashboard/invoices/page.tsx

import { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Invoices | Acme Dashboard',
};

루트 레이아웃 메타데이터 객체에 template 속성을 사용하면 페이지 타이틀에 템플릿을 적용할 수 있다. 템플릿에서 %s는 하위 페이지에서 정의한 title 값으로 대체된다. default 속성은 하위 페이지에서 title을 정의하지 않았을 때 사용할 기본 제목.

// app/layout.tsx

export const metadata: Metadata = {
  title: {
    // 개별 title 제목에 템플릿 적용 (하위 페이지에서 타이틀을 지정하면 %s 부분에 들어감)
    template: '%s | Acme Dashboard',
    // 기본 title (개별 페이지에서 타이틀을 정의하지 않았을 때 사용됨)
    default: 'Acme Dashboard',
  },
  description: 'The official Next.js Course Dashboard, built with App Router.',
  metadataBase: new URL('https://next-learn-dashboard.vercel.sh'),
}

예를들어 /dashboard/invoices 페이지의 메타데이터는 다음과 같이 정의할 수 있다. 최종적으로 title은 템플릿이 적용되어 Invoices | Acme Dashboard 로 설정 된다.

// app/dashboard/invoices/page.tsx

export const metadata: Metadata = {
  title: 'Invoices',
};

미립자 팁

최초 페이지 진입 시에는 SSR, SSG 등으로 초기 렌더링이 이루어지지만, 이후 next/link 같은 내부 링크를 통해 다른 페이지로 이동할 땐 클라이언트 사이드 라우팅으로 동작한다(새로고침 없이 페이지 전환). 헷갈릴 수 있으니 주의하자.

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요

저작자표시 비영리 동일조건

'🪄 Programming' 카테고리의 다른 글

[React] 리액트 19 업데이트 내용 톺아보기 (0)	2025.02.08
[Next.js] Dynamic Routes 다이나믹 라우트 (0)	2025.01.31
[Dev] 시맨틱 버저닝 Semantic Versioning (0)	2025.01.27
[React] 리액트의 올바른 useEffect 사용팁 (2)	2025.01.21
[JS] 자바스크립트 코드 최적화 기법 모음 (23)	2024.12.07

[Next.js] App Router 공식 튜토리얼 톺아보기

Optimizing Fonts and Images

Adding a primary font

Why optimize images?

Creating Layouts and Pages

Rendering

Streaming

Partial Prerendering (PPR)

데이터 패칭 최적화 방법 6가지

Adding Search and Pagination

Mutating Data

서버 액션을 활용한 /create 로직

동적 라우트를 활용한 /update 로직

Handling Errors

Improving Accessibility

Client-Side validation

Server-Side validation

Adding Authentication

NextAuth 기본 설정

Password hashing

Adding the sign in functionality

Updating the login form

Adding the logout functionality

Adding Metadata

Types of metadata

Adding metadata

Favicon / Open Graph Image

Page title and descriptions

미립자 팁

'🪄 Programming' 카테고리의 다른 글

댓글

이 글 공유하기

티스토리툴바

Optimizing Fonts and Images

Adding a primary font

Why optimize images?

Creating Layouts and Pages

Rendering

Streaming

Partial Prerendering (PPR)

데이터 패칭 최적화 방법 6가지

Adding Search and Pagination

Mutating Data

서버 액션을 활용한 /create 로직

동적 라우트를 활용한 /update 로직

Handling Errors

Improving Accessibility

Client-Side validation

Server-Side validation

Adding Authentication

NextAuth 기본 설정

Password hashing

Adding the sign in functionality

Updating the login form

Adding the logout functionality

Adding Metadata

Types of metadata

Adding metadata

Favicon / Open Graph Image

Page title and descriptions

미립자 팁

'🪄 Programming' 카테고리의 다른 글

댓글

이 글 공유하기

다른 글

[React] 리액트 19 업데이트 내용 톺아보기

[Next.js] Dynamic Routes 다이나믹 라우트

[Dev] 시맨틱 버저닝 Semantic Versioning

[React] 리액트의 올바른 useEffect 사용팁

티스토리툴바