+
id: {params.id}
+
keyword: {searchParams.keyword}
+
로딩 중...
;
+}
+
+```
+
+`page.tsx`에서 데이터를 가져오는 동안 `loading.tsx`가 먼저 보여질 수 있다.
+
+이 방식은 사용자가 빈 화면을 오래 보는 문제를 줄이는 데 도움이 된다.
+
+---
+
+
+# Route Handler
+
+Pages Router에서는 API를 만들기 위해 `pages/api`를 사용했다.
+
+```txt
+pages/
+ api/
+ hello.ts
+
+```
+
+```ts
+// pages/api/hello.ts
+export default function handler(req, res) {
+ res.status(200).json({ message: 'hello' });
+}
+
+```
+
+App Router에서는 `route.ts` 파일을 사용한다.
+
+```txt
+app/
+ api/
+ hello/
+ route.ts
+
+```
+
+```ts
+// app/api/hello/route.ts
+export async function GET() {
+ return Response.json({ message: 'hello' });
+}
+
+```
+
+HTTP 메서드에 따라 `GET`, `POST`, `PUT`, `DELETE` 같은 함수를 export할 수 있다.
+
+```ts
+export async function POST(request: Request) {
+ const body = await request.json();
+
+ return Response.json({
+ message: 'created',
+ data: body,
+ });
+}
+
+```
+
+즉, App Router에서는 API 응답을 만들 때 `app/api/.../route.ts` 구조를 사용한다.
+
+## 매개변수: Request와 Context
+
+Route Handler의 함수는 `request`와 `context`를 매개변수로 받을 수 있다.
+
+```ts
+export async function GET(
+ request: Request,
+ context: { params: { id: string } }
+) {
+ return Response.json({
+ id: context.params.id,
+ });
+}
+
+```
+
+### Request
+
+`request`는 클라이언트가 보낸 HTTP 요청 정보를 담고 있다.
+
+이를 통해 요청 본문(body), 헤더(header), 쿠키(cookie), URL 정보 등을 확인할 수 있다.
+
+```ts
+export async function POST(request: Request) {
+ const body = await request.json();
+
+ return Response.json(body);
+}
+
+```
+
+위 코드에서는 `request.json()`을 사용해 클라이언트가 보낸 요청 본문을 읽고 있다.
+
+URL의 query string도 읽을 수 있다.
+
+```ts
+export async function GET(request: Request) {
+ const { searchParams } = new URL(request.url);
+
+ const keyword = searchParams.get('keyword');
+
+ return Response.json({
+ keyword,
+ });
+}
+
+```
+
+```txt
+/api/posts?keyword=react
+
+```
+
+위 요청이 들어오면 다음과 같은 응답을 반환할 수 있다.
+
+```json
+{
+ "keyword": "react"
+}
+
+```
+
+즉, `request`는 클라이언트가 보낸 요청 데이터를 읽기 위해 사용한다.
+
+### NextRequest
+
+Next.js에서는 `Request` 대신 `NextRequest`를 사용할 수도 있다.
+
+```ts
+import { NextRequest } from 'next/server';
+
+export async function GET(request: NextRequest) {
+ const keyword = request.nextUrl.searchParams.get('keyword');
+
+ return Response.json({
+ keyword,
+ });
+}
+
+```
+
+`NextRequest`는 기본 Web API의 `Request` 객체를 확장한 Next.js만의 요청 객체라고 볼 수 있다.
+
+기본적인 요청 정보뿐만 아니라, Next.js에서 자주 사용하는 기능을 더 편하게 사용할 수 있도록 제공된다.
+
+예를 들어 `NextRequest`를 사용하면 `nextUrl`을 통해 URL 정보를 더 쉽게 다룰 수 있다.
+
+```ts
+export async function GET(request: NextRequest) {
+ const pathname = request.nextUrl.pathname;
+ const keyword = request.nextUrl.searchParams.get('keyword');
+
+ return Response.json({
+ pathname,
+ keyword,
+ });
+}
+
+```
+
+또한 쿠키 정보도 확인할 수 있다.
+
+```ts
+export async function GET(request: NextRequest) {
+ const token = request.cookies.get('token');
+
+ return Response.json({
+ token,
+ });
+}
+
+```
+
+따라서 단순히 요청 body나 URL만 확인한다면 `Request`로도 충분하다.
+
+하지만 쿠키나 `nextUrl`처럼 Next.js에서 제공하는 기능을 사용해야 한다면 `NextRequest`를 사용할 수 있다.
+
+---
+
+### Context
+
+`context`는 동적 라우트의 `params`만 제공한다.
+
+페이지 컴포넌트의 `params`와 비슷한 개념이라고 생각하면 이해하기 쉽다.
+
+예를 들어 다음과 같은 구조가 있다고 해보자.
+
+```txt
+app/
+ api/
+ posts/
+ [id]/
+ route.ts
+
+```
+
+사용자가 다음 URL로 요청을 보낸 경우
+
+```txt
+/api/posts/1
+
+```
+
+`context.params.id`에는 `"1"`이 들어온다.
+
+```ts
+export async function GET(
+ request: Request,
+ { params }: { params: { id: string } }
+) {
+ return Response.json({
+ id: params.id,
+ });
+}
+
+```
+
+---
+
+
+# Error 처리
+
+App Router에서는 에러 처리를 파일 기반으로 할 수 있다.
+
+대표적으로 `error.tsx`를 사용할 수 있다.
+
+```txt
+app/
+ dashboard/
+ error.tsx
+ page.tsx
+
+```
+
+```tsx
+'use client';
+
+export default function Error() {
+ return 문제가 발생했다.
;
+}
+
+```
+
+`error.tsx`는 해당 route segment에서 발생한 에러를 처리하는 Error Boundary 역할을 한다.
+
+주의할 점은 `error.tsx`는 Client Component여야 한다.
+
+따라서 파일 상단에 `'use client'`를 작성해야 한다.
+
+404 페이지는 `not-found.tsx`로 처리할 수 있다.
+
+```tsx
+// app/not-found.tsx
+export default function NotFound() {
+ return 페이지를 찾을 수 없습니다.
;
+}
+
+```
+
+특정 상황에서 의도적으로 404 페이지를 보여주고 싶다면 `notFound()`를 사용할 수 있다.
+
+```tsx
+import { notFound } from 'next/navigation';
+
+export default async function Page() {
+ const data = await getData();
+
+ if (!data) {
+ notFound();
+ }
+
+ return