# cacheTag

cacheTag 함수는 캐시된 데이터를 태그로 관리해서 필요한 순간에만 캐시를 지우거나 갱신할 수 있게 도와줘요. 태그를 캐시 항목에 붙여두면, 전체 캐시를 지우는 대신 특정 태그가 붙은 데이터만 골라서 재검증하거나 삭제할 수 있답니다. 이 기능 덕분에 캐시 관리가 훨씬 스마트해지고 효율적이죠!

## 사용 방법

cacheTag를 사용하려면, 먼저 프로젝트의 `next.config.js` 파일에서 `dynamicIO` 플래그를 활성화해야 해요. 이렇게요:

```js
// next.config.js
module.exports = {
  experimental: {
    dynamicIO: true,
  },
};
```

> `dynamicIO` 옵션은 아직 실험적인 기능이라, 안정성이 필요한 프로젝트에서는 신중하게 적용하는 게 좋아요.

이 설정을 한 다음, 원하는 캐시 데이터에 태그를 달아서 관리할 수 있습니다.

---

### 참고로 더!

- 태그 관리 덕분에 특정 부분만 업데이트해야 할 때, 서버 성능과 사용자 경험이 크게 개선됩니다.
- 이 기능은 특히 데이터가 자주 바뀌면서도 전체를 다시 로드하는 건 비효율적인 서비스(예: 뉴스 피드, 실시간 데이터 보여주는 앱 등)에 유용해요.
- `cacheTag`를 사용하면서 동시에 어떻게 캐시 무효화 전략을 세울지 고민해보면 프로젝트의 퍼포먼스 최적화에 큰 도움이 됩니다.

필요하면 다음에 캐시 사용 예제에 대해서도 알려줄게요!



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Next.js에서 새롭게 제공하는 캐시 태그(cacheTag) 기능을 재미있게 활용해볼까요? 이번에 소개할 코드는 캐시를 더 세밀하게 관리할 수 있게 도와주는 설정과 함수예요.

### 1. next.config.js 설정

먼저 `next.config.js` 파일에서 실험적 기능인 `dynamicIO`를 활성화해야 해요. 이 옵션을 켜면 Next.js가 새로운 캐시 태그 기능을 사용할 수 있도록 준비된답니다.

```js
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  experimental: {
    dynamicIO: true,
  },
};

export default nextConfig;
```

여기서 `dynamicIO`는 아직 완전히 안정화된 기능은 아니지만, 캐시 제어나 데이터 페칭에 좀 더 유연한 방식으로 접근할 수 있게 해줘요.

---

### 2. 캐시 태그 지정하기 - `cacheTag`

이제 함수 안에서 `cacheTag` 함수를 써보죠! 이 함수는 하나의 문자열 태그, 혹은 문자열 배열로 캐시 태그를 지정할 수 있어요.

```js
import { unstable_cacheTag as cacheTag } from "next/cache";

export async function getData() {
  "use cache";
  cacheTag("my-data");
  const data = await fetch("/api/data");
  return data;
}
```

- 먼저 함수 최상단 `'use cache'` 디렉티브를 호출해 캐시 기능을 활성화해줍니다.
- `cacheTag('my-data')`로 해당 함수가 사용하는 캐시 태그를 지정하죠.
- 이렇게 하면 `my-data`라는 태그를 기준으로 캐싱되고, 이 태그만 선택적으로 무효화할 수 있습니다.

이게 뭐가 좋느냐면, 데이터를 전체 페이지가 아니라 세부 단위별로 새로고침할 수 있다는 점이에요. 예를 들어, 특정 API 데이터를 업데이트해야 할 때 전체 페이지를 빌드할 필요 없이 해당 데이터만 캐시를 지우고 재생성할 수 있게 되는 거죠.

---

### 3. 캐시 무효화 (Cache Purge) - `revalidateTag`

캐시가 오래되었거나, 데이터를 리프레시하려면 태그 단위로 캐시를 무효화하는 게 중요한데요. Next.js는 `revalidateTag` API로 이걸 쉽게 지원합니다.

```js
import { revalidateTag } from "next/cache";

export async function POST() {
  // 예: API 라우트에서 데이터가 변경될 때 해당 캐시 태그를 무효화
  await doDataUpdate();
  revalidateTag("my-data");
  return new Response('Cache cleared for "my-data" tag');
}
```

- 위 예시처럼, 서버측 함수에서 데이터 수정 후 `revalidateTag('my-data')`를 호출하면 `'my-data'` 관련된 캐시가 모두 무효화됩니다.
- 그러면 다음 요청 시점에 다시 최신 데이터를 받아서 캐쉬를 갱신하게 되죠.

---

## 요약

| 기능                     | 설명                                                       |
| ------------------------ | ---------------------------------------------------------- |
| `experimental.dynamicIO` | Next.js에서 캐시 태그 사용을 위한 실험적 설정              |
| `cacheTag`               | 함수 내에서 캐시 태그를 지정, 데이터 단위별 캐시 제어 가능 |
| `revalidateTag`          | 특정 태그에 해당하는 캐시를 서버에서 강제로 무효화         |

---

## 한마디

이번에 소개한 캐시 태그 기능은 특히 데이터가 자주 업데이트되는 상황에서 유용해요. API 응답이나 UI 컴포넌트의 일부를 효과적으로 갱신할 수 있으니, 무조건 페이지 전체를 다시 빌드하는 구조에서 벗어나고 싶다면 한 번 꼭 시도해보세요. 실험적이라 공식 문서와 버전이 바뀌는지는 꾸준히 체크하는 것도 잊지 마시고요!

더 궁금한 점 있으면 언제든 댓글로 남겨주세요. 같이 공부해봐요! 😊



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

위 코드는 Next.js의 서버 컴포넌트에서 캐시를 제어할 때 사용하는 예제입니다. 여기서 핵심은 revalidateTag라는 함수로 특정 캐시 태그를 재검증(revalidate)해서, 데이터가 바뀌었을 때 최신 상태로 유지하게 만드는 거예요.

```js
"use server";

import { revalidateTag } from "next/cache";

export default async function submit() {
  await addPost(); // 새로운 포스트를 추가하는 비동기 함수
  revalidateTag("my-data"); // 'my-data'라는 태그가 붙은 캐시를 재검증해서 최신으로 업데이트
}
```

위 코드에서 addPost()가 끝나면, 'my-data'라는 태그를 가진 캐시는 재검증돼서 이전 데이터가 아닌 새 데이터를 가져오도록 만드는 역할이에요.

---

## 알아두면 좋은 팁

| 내용            | 설명                                                                               |
| --------------- | ---------------------------------------------------------------------------------- |
| Idempotent Tags | 동일한 태그를 여러 번 적용해도 추가적인 효과가 없어요. 중복 적용해도 무방해요.     |
| Multiple Tags   | 한 캐시 엔트리에 여러 태그를 붙일 수 있어요. 배열 형태로 태그들을 넘겨주면 됩니다. |

예를 들어 이렇게 사용해요:

```js
cacheTag("tag-one", "tag-two");
```

위와 같이 여러 태그를 한 번에 붙이면, 이 캐시 항목이 두 가지 태그에 묶여서 둘 중 하나라도 변경될 경우 재검증됩니다.

---

### 개인적으로 추가로 알려드릴 점!

캐시 태그를 이렇게 사용하면 무조건 캐시 무효화(invalidation)를 하느니, 필요한 부분만 선별적으로 업데이트하는 '스마트 캐싱' 전략을 세우기 좋아요. 데이터가 자주 변하는 서비스에서는 서버 성능과 유저 경험을 둘 다 잡기 위해 꼭 익혀야 하는 기능입니다.

Next.js 13+ 버전에서 제공하는 이 기능을 잘 활용하면, SSR(Server Side Rendering) 혹은 ISR(Incremental Static Regeneration) 환경에서도 원하는 타이밍에 효율적으로 데이터를 업데이트할 수 있어요. 번거로운 캐시 조작을 줄이고, 최신 데이터도 놓치지 않게 해주는 아주 쓸모 있는 기능이죠!

필요하시면 addPost() 같은 함수 내부 구현도 같이 다뤄볼테니, 언제든 질문 주세요!



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

## 예제

### 컴포넌트나 함수에 태그 달기

캐시된 함수나 컴포넌트 안에서 `cacheTag`를 호출해서 캐시 데이터를 태그할 수 있어요. 이렇게 하면 캐시 관리가 좀 더 편리해지고, 특정 태그를 기준으로 캐시를 재검증하거나 삭제할 수 있답니다.

```js
import { unstable_cacheTag as cacheTag } from "next/cache";

interface BookingsProps {
  type: string;
}

export async function Bookings({ type = "haircut" }: BookingsProps) {
  "use cache";
  cacheTag("bookings-data");

  async function getBookingsData() {
    const data = await fetch(`/api/bookings?type=${encodeURIComponent(type)}`);
    return data;
  }

  return; //...
}
```

---

여기서 중요한 포인트는 `'use cache'`라는 디렉티브를 함수 최상단에 써서 이 함수가 캐싱 기능을 사용할 거라고 알려준다는 점이에요. 그리고 `cacheTag('bookings-data')`를 호출해서 이 함수가 반환하는 데이터에 `bookings-data`라는 태그를 붙이는 거죠.

이렇게 태그를 달아두면, 나중에 `bookings-data` 태그가 붙은 캐시들을 한꺼번에 무효화하거나 업데이트할 때 훨씬 편리해져요.

또한 참고할 점은, 이 기능이 아직 불안정(`unstable`)한 API이므로, 앞으로 변경될 가능성이 있다는 점이에요. 그래도 Next.js 같은 최신 프레임워크에서 제공하는 기능을 미리 써보면서 경험해보는 것도 좋겠죠?

추가로, 만약 다양한 타입의 예약 데이터를 관리해야 한다면 태그 이름을 `bookings-data:${type}` 같은 식으로 동적으로 생성하는 것도 좋은 방법이에요. 이렇게 하면 특정 타입만 골라서 캐시를 제어할 수 있거든요!



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

### 외부 데이터로부터 태그 만들기

비동기 함수(async function)에서 반환된 데이터를 이용해서 캐시 항목에 태그를 붙일 수 있어요.

```js
import { unstable_cacheTag as cacheTag } from "next/cache";

interface BookingsProps {
  type: string;
}

export async function Bookings({ type = "haircut" }: BookingsProps) {
  async function getBookingsData() {
    "use cache"; // 캐시 활용을 위한 지시어
    const data = await fetch(`/api/bookings?type=${encodeURIComponent(type)}`);
    cacheTag("bookings-data", data.id); // 받은 데이터의 id를 태그값으로 지정
    return data;
  }
  return; //...
}
```

여기서 중요한 포인트는 `cacheTag`를 사용해 데이터를 태그함으로써 특정 조건에 따라 캐시를 더 정밀하게 관리할 수 있다는 거예요. 예를 들어, 예약 타입별로 캐시를 구분하거나 데이터 ID별로 캐시 무효화를 쉽게 할 수 있죠.

그리고 `use cache`라는 키워드가 보이죠? 이건 Next.js가 이 함수 결과를 캐싱하도록 알려주는 역할을 합니다. 실제 프로젝트에서는 이렇게 재사용 가능한 데이터를 효율적으로 다룰 때 꼭 활용해보세요!

### 태그된 캐시 무효화하기

작성한 태그를 기반으로 캐시를 무효화해 특정 데이터가 변경되었을 때 최신 상태를 유지할 수 있어요.

```js
import { unstable_invalidateCacheTag as invalidateCacheTag } from "next/cache";

export async function invalidateBookingCache(id: string) {
  // 'bookings-data'라는 태그에 id 값으로 붙인 캐시를 무효화합니다.
  invalidateCacheTag("bookings-data", id);
}
```

이렇게 태그 단위로 캐시를 무효화하면, 불필요한 전체 캐시 초기화 없이 원하는 부분만 갱신 가능해져서 효율적이에요. 만약 데이터 변경 이벤트가 발생하면 이 함수를 호출해 관련 캐시를 리프레시하는 방식으로 활용하면 됩니다.

캐시 태그 활용법은 Next.js 13버전 이후의 캐시 전략에서 굉장히 강력한 기능 중 하나이니 꼭 익혀두세요! 개발하며 때때로 캐시 데이터가 꼬일 때 이 방법으로 깔끔하게 관리할 수 있습니다.



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

'revalidateTag'를 사용하면 필요한 시점에 특정 태그의 캐시를 무효화해서 최신 데이터를 반영할 수 있어요. 예를 들어, 아래 코드처럼 'bookings-data'라는 태그에 달려있는 캐시를 갱신해줄 수 있죠.

```js
"use server";

import { revalidateTag } from "next/cache";

export async function updateBookings() {
  await updateBookingData();
  revalidateTag("bookings-data");
}
```

간단히 말해, updateBookingData() 함수가 예약 데이터를 업데이트한 뒤에 revalidateTag('bookings-data')를 호출하면, Next.js가 그 태그에 연결된 캐시를 무효화해서 사용자들에게 최신 정보를 보여주게 됩니다.

여기서 중요한 점은, 캐시 무효화를 태그 단위로 관리할 수 있다는 거예요. 덕분에 전체 페이지 캐시를 다 날리지 않고도, 특정 데이터 부분만 신속하게 업데이트할 수 있으니 효율적이죠!

추가로, revalidateTag는 서버 컴포넌트나 API 라우트 등 서버 측 코드에서만 사용 가능하다는 점도 기억해 주세요. 클라이언트 측에서는 사용할 수 없고, 반드시 'use server' directive가 있어야 합니다.

Next.js 15에서 cacheTag 사용해서 효율적으로 캐시 관리하는 방법

# connection 함수 살펴보기

오늘은 Next.js에서 제공하는 `connection()` 함수에 대해 이야기해볼게요. 이 함수는 이름만 들으면 네트워크 연결처럼 느껴지지만, 실제로는 렌더링 시점을 제어하는 역할을 한답니다.

## connection() 함수가 뭐예요?

쉽게 말해, `connection()` 함수는 렌더링을 잠시 멈췄다가 **유저의 요청이 들어올 때까지 기다렸다가** 렌더링을 계속하도록 해줘요.

왜 이런 기능이 필요하냐고요? 보통 컴포넌트들은 프리렌더링(빌드 타임에 미리 화면을 만들어두는 것)을 하거든요. 그런데 우리가 원하는 건 프리렌더링이 아니라, **실시간으로 변화하는 값**을 화면에 보여주는 거라면 다르게 처리해야 해요.

예를 들면 `Math.random()`이나 `new Date()`처럼 매번 다른 결과를 내는 값들이 그러하죠. 이런 값들은 빌드할 때 계산해버리면, 그 결과가 계속 고정되어 버리잖아요? 그래서 유저가 접속할 때마다 새로 계산해서 보여줘야 하는 경우가 있어요.

이럴 때 `connection()` 함수를 쓰면, 빌드 타임에 렌더링하는 대신 유저 요청 시점에 렌더링하도록 하는 거죠.

## 간단한 예제 코드

```jsx
import { connection } from "next/server";

export default async function Page() {
  await connection();
  // 이 아래에서 작성한 코드는 빌드 시점이 아니라,
  // 실제 요청이 들어올 때 실행돼요!
  const rand = Math.random();
  return <span>{rand}</span>;
}
```

보시면 `await connection()`을 호출하는 순간부터 아래 코드는 빌드 타임에 무시되고, 유저가 페이지를 요청했을 때 실행된답니다.

## 이런 점도 알아두면 좋아요!

- `connection()`은 서버에서만 동작해요. 그래서 클라이언트 쪽 코드에서는 사용할 수 없고, 주로 서버 컴포넌트 안에서 써요.
- 프리렌더링을 완전히 안 하니까, 렌더링 속도는 약간 느릴 수 있어요. 그러니 꼭 필요할 때만 사용하는 게 좋아요.
- `connection()` 없이도 `force-dynamic` 같은 옵션으로도 비슷한 효과를 낼 수 있는데, 사용 의도에 따라 적절하게 선택하면 돼요.

## 마무리

정리하자면, `connection()`은 **빌드 타임이 아닌 요청 시점에 렌더링을 하도록 만들어주는 함수**에요. 그래서 동적인 데이터를 실시간에 가깝게 보여야 할 때 정말 유용하답니다.

Next.js를 쓸 때 이 함수가 왜 필요한지, 어떻게 쓰는지 이해하면 좀 더 유연한 서버 컴포넌트를 만들 수 있어요. 나중에 실시간 데이터 처리 혹은 매번 변하는 값을 렌더링해야 할 때 한 번 써보면 좋겠습니다!



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

## 참고 자료

### 함수 타입

```js
function connection(): Promise<void>
```

### 파라미터

이 함수는 딱히 파라미터를 받지 않아요. 그냥 연결을 시도하고, 연결이 성공하면 `Promise`가 해결되고, 실패하면 에러가 발생하는 구조입니다.

---

함수 이름인 `connection`으로 봤을 때, 아마도 데이터베이스 연결이나 네트워크 연결 같은 걸 담당하는 함수가 아닐까 싶은데요. 실제로 이런 함수는 비동기 작업이 많기 때문에 `Promise<void>`를 반환하는 게 일반적입니다.

`Promise<void>`라는 건, 작업이 성공적으로 끝나면 별다른 값을 반환하지 않는다는 뜻이에요. 그래서 이 함수를 사용할 때는 `await connection()` 처럼 쓰거나, `.then()`을 사용해서 연결이 끝난 후에 실행할 코드를 작성하면 됩니다.

```js
async function initApp() {
  try {
    await connection();
    console.log("연결 완료!");
  } catch (error) {
    console.error("연결 실패:", error);
  }
}
```

연결이 성공했는지 여부에 따라서 애플리케이션 로직이 달라질 수 있기 때문에, 꼭 `try-catch` 문이나 `.catch()`를 활용해 에러 처리를 해주시는 게 좋아요!



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

- 이 함수는 어떠한 매개변수도 받지 않습니다.

### 반환 값

- 함수는 void를 반환하는 Promise를 리턴합니다. 즉, 호출자가 결과 값을 활용하도록 설계된 함수가 아니에요.

## 알아두면 좋은 점

이런 타입의 함수는 보통 내부에서 비동기 작업을 처리하지만, 결과를 직접적으로 반환하거나 전달하지 않고 그냥 처리만 하고 끝나는 경우에 많이 쓰여요. 예를 들어 로그를 저장하거나, 캐시를 비우는 작업처럼 "결과가 있으면 좋지만 없어도 되는" 경우에요.

만약 함수의 처리가 실패할 수 있다면, Promise를 리턴하니 async/await나 then/catch로 에러를 잡아주는 걸 잊지 마세요! 그래야 앱이 예기치 않게 멈추는 걸 막을 수 있습니다.



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

- connection이 unstable_noStore를 대체해서, 앞으로 Next.js의 방향에 더 잘 맞게 업데이트되었어요.
- 이 함수는 동적 렌더링이 꼭 필요할 때만 사용하면 되며, 일반적인 Dynamic API들을 사용할 경우에는 필요하지 않아요.

### 버전 히스토리

| 버전         | 변경사항                 |
| ------------ | ------------------------ |
| `v15.0.0`    | `connection`가 안정화됨. |
| `v15.0.0-RC` | `connection` 도입됨.     |

참고로, Next.js가 점점 더 SSR(서버 사이드 렌더링)과 SSG(정적 사이트 생성)을 효율적으로 처리할 수 있도록 많은 개선을 하고 있어서, 이런 함수들이 안정화되는 게 개발자 입장에서 꽤 반가운 소식이에요. 특히 동적 콘텐츠를 다룰 때 성능과 안정성을 높이는 데 도움이 된답니다!

Next.js 15에서 Connection 관리하는 방법

Next.js 15에서 cacheLife 설정하는 방법 및 캐시 수명 관리 방법 정리

# after

`after`는 응답(response)이나 프리렌더(prerender)가 완료된 후에 작업을 예약해서 실행할 수 있게 해주는 기능입니다. 쉽게 말해, 사용자에게 응답을 보내는 데 방해가 되지 않아야 하는 작업들—예를 들어 로그 기록, 분석 데이터 수집 같은 부수 효과들—을 뒤로 미룰 때 유용해요.

이 기능은 Server Components (예: `generateMetadata` 포함), Server Actions, Route Handlers, 그리고 Middleware에서도 사용할 수 있습니다.

사용법은 간단해요. `after` 함수에 콜백 함수를 넘겨주면, 응답이 끝난 뒤에 그 콜백이 실행됩니다. 그래서 응답 속도를 늦추지 않고도 필요한 작업을 뒤에서 처리할 수 있죠.

---

### 추가 팁!
- 예를 들어, 사용자의 방문 기록을 DB에 저장하는 로직을 `after`로 실행하면, 방문자 입장에선 페이지가 빠르게 로드되고, 백엔드에서는 기록 작업이 조용히 이루어져 좋은 UX를 만들 수 있어요.
- 하지만 너무 무거운 작업을 `after`에 넣으면 서버 자원을 불필요하게 잡아먹을 수 있으니, 적절한 용도로 사용해야 합니다.
- 만약 처리 중 에러가 나도 응답에는 영향을 주지 않습니다. 에러 핸들링도 따로 챙겨주면 좋아요.

---

필요하면 예제 코드도 공유해 드릴게요—함께 공부해봅시다!


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

안녕하세요! 오늘은 Next.js의 서버 컴포넌트에서 `after` 함수를 어떻게 활용할 수 있는지 간단하게 알려드릴게요.

```js
import { after } from 'next/server'
// 커스텀 로깅 함수
import { log } from '@/app/utils'

export default function Layout({ children }: { children: React.ReactNode }) {
  after(() => {
    // 레이아웃이 렌더링되고 사용자에게 전송된 후에 실행됩니다.
    log()
  })
  return <>{children}</>
}
```

### 핵심 포인트!  
`after` 함수는 렌더링이 끝난 다음, 클라이언트에게 응답을 보낸 후 콜백 함수를 실행시키는 역할을 해요. 예를 들면, 로그를 남기거나 데이터를 트래킹할 때 유용하겠죠.

> **참고:** `after`는 동적 API가 아니에요. 그러니까 이걸 호출한다고 해서 페이지가 자동으로 동적 라우트(dynamic route)가 되는 건 아닙니다.  
> 만약 static page 내에서 사용하면, 이 콜백 함수는 빌드 타임이나 페이지가 다시 검증(revalidate) 될 때 실행됩니다.

---

## `after` 함수 주요 특징 정리!

| 파라미터 | 설명 |
|---------|------|
| 콜백 함수 | 렌더링 직후 실행할 함수. 비동기 콜백도 지원하지만, 응답을 막지는 않음 |

---

### 더 알아두면 좋은 점  
- 서버 컴포넌트라서 클라이언트에서 확인할 수 없는 서버 정보도 수집하기 편합니다.  
- 로그 외에도 꼭 필요한 후처리를 비동기적으로 깔끔하게 처리하고 싶을 때 좋습니다.  
- `after`의 콜백은 사용자에게 페이지가 전달된 후 실행되니 렌더링 성능에 영향을 주지 않고, 부담 없이 후처리를 맡길 수 있어요.

---

Next.js로 서버 사이드 렌더링을 다룰 때 이런 후처리 방법을 알고 있으면 성능 튜닝이나 디버깅에 큰 도움이 됩니다. 오늘도 좋은 개발하시길 바라요! 😊


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

- 응답(또는 프리렌더링)이 완료된 후 실행될 콜백 함수입니다.

### 실행 시간(Duration)

`after` 함수는 기본적으로 플랫폼에서 설정된 최대 실행 시간(또는 라우트별로 설정된 최대 지속 시간) 동안 실행됩니다. 만약 사용하는 플랫폼이 지원한다면, 라우트의 `maxDuration` 설정을 통해 타임아웃 제한을 조절할 수 있어요.

## 참고하면 좋은 점

- 콜백 함수가 너무 오래 실행되면 타임아웃이 발생할 수 있으니, 작업이 오래 걸리는 경우 최대 실행 시간을 적절히 설정하는 것이 중요합니다.
- 이 기능은 서버리스 환경이나 프리렌더링 작업에서 특히 유용해요. 예를 들어, 데이터를 미리 가져오거나 로깅 작업을 비동기적으로 처리할 때 활용할 수 있답니다.
- `maxDuration` 설정이 없는 경우에는 플랫폼 기본값이 적용되니, 꼭 확인해 보세요!


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

- after는 응답이 정상적으로 완료되지 않아도 실행이 됩니다. 에러가 발생하거나 notFound 또는 redirect가 호출된 경우에도 마찬가지에요.
- React 캐시를 활용해서 after 내부에서 호출되는 함수들의 중복 실행을 방지할 수 있어요.
- after는 중첩해서 사용할 수도 있어요. 예를 들어, after 호출을 감싸는 유틸리티 함수를 만들어서 추가 기능을 덧붙일 수도 있죠.

## 대안들

after의 주된 용도는 주 응답을 막지 않고 부수적인 작업을 처리하는 거예요. 이 점에서 플랫폼의 waitUntil()이나 프로미스에서 await을 빼는 것과 비슷하지만, 중요한 차이점이 있어요:

| 구분           | 설명                                                                                                                                              |
|----------------|--------------------------------------------------------------------------------------------------------------------------------------------------|
| waitUntil()    | 프로미스를 받아서 요청 수명주기 동안 실행할 작업을 예약해요.                                                                                         |
| after          | 응답이 완전히 끝난 후에 실행할 콜백을 받아요.                                                                                                      |
| await 제거     | 응답 중에 실행을 시작해 리소스를 이용해요. 또한 서버리스 환경에서는 응답 후 함수 실행을 바로 멈추기 때문에 작업이 중단될 위험이 있어요.               |

쉽게 말해서 waitUntil()은 백그라운드에서 요청과 함께 작업을 처리하지만 after는 응답이 끝난 후에 작업을 처리해요. await을 쓰지 않는 건 리소스 낭비와 안정성 문제를 초래할 수 있으니 상황에 맞게 선택하는 게 중요해요.

참고로, 서버리스 환경에서는 특히 이런 비동기 작업이 응답 직후에 중단될 위험이 크기 때문에 after나 waitUntil() 같은 명확한 처리방식을 사용하는 게 좋아요. 그리고 React 캐시를 적극 활용하면 함수 호출 중복도 줄이고 성능도 높일 수 있으니 꼭 활용해보세요!


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Next.js에서는 'after'를 사용하는 걸 추천해요. 이유는 'after'가 Next.js의 다른 API나 컨텍스트들을 잘 고려해서 설계되었기 때문이죠. 즉, 더 안정적이고 일관성 있게 동작할 수 있다는 뜻이에요.

## 예제

### 요청(Request) API와 함께 사용하기

서버 액션(Server Actions)이나 라우트 핸들러(Route Handlers) 내에서 'after' 블록 안에 쿠키(cookies)나 헤더(headers) 같은 요청 관련 API를 사용할 수 있어요. 예를 들어, 어떤 데이터 변경(mutation) 작업 후에 활동 기록을 로그로 남기고 싶을 때 유용하답니다.

실제로 이걸 어떻게 활용할 수 있는지 살짝 보여드릴게요. 간단한 예제로, 사용자가 데이터를 변경한 뒤에 로그를 남기는 경우를 생각해 볼 수 있죠.

(여기에 간단한 코드 예제가 들어가면 더 이해가 쏙쏙 될 텐데, 혹시 필요하면 알려주세요! 제가 바로 준비해드릴게요.)

---

참고로, Next.js에서 이렇게 'after'를 활용하면 요청에 대한 응답 처리 후에 후처리를 자연스럽게 할 수 있어서, 코드가 깔끔해지고 유지보수도 쉬워진답니다. 여러분도 프로젝트에 적용해 보시면 좋을 것 같아요!


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Next.js의 `after` 훅을 활용해서 서버 액션 후에 로깅 작업을 진행하는 예제를 보여드렸는데요, 여기서 주의할 점이 있어요.

```js
import { after } from 'next/server'
import { logUserAction } from '@/app/utils'

export async function POST(request: Request) {
  // Perform mutation
  after(async () => {
    const userAgent = (await headers().get('user-agent')) || 'unknown'
    const sessionCookie =
      (await cookies().get('session-id'))?.value || 'anonymous'

    logUserAction({ sessionCookie, userAgent })
  })

  return new Response(JSON.stringify({ status: 'success' }), {
    status: 200,
    headers: { 'Content-Type': 'application/json' },
  })
}
```

문제는 `after`에서 `headers()`나 `cookies()` 같은 request API를 사용할 수 없다는 점이에요. 왜냐하면 Next.js는 Partial Prerendering(부분 프리렌더링)을 지원하기 위해 요청 API를 어떤 컴포넌트가 사용하는지 알아야 하는데, `after` 훅은 React 렌더링 라이프사이클 이후에 실행되기 때문에 그 제약에 걸려버립니다.

즉, `after` 내부에서는 요청 관련 API를 호출하면 에러가 발생할 수 있으니 꼭 다른 곳에서 요청 정보를 추출하고, `after`에는 순수히 후처리 로직만 넣어주는 게 안전해요.

아래는 간단히 Next.js 버전별 `after` 훅 관련 히스토리를 정리한 표입니다.

| Version History | Description                      |
|-----------------|---------------------------------|
| `v15.1.0`       | `after`가 안정화됨 (stable)      |
| `v15.0.0-rc`    | `unstable_after`가 도입됨        |

이 내용 참고하셔서, `after` 훅을 활용할 때는 request API 접근 제한을 명심하고, 코드를 설계해보세요. 혹시 `after`에서 request 정보를 꼭 사용해야 할 경우엔, 요청 데이터를 미리 받고 전달하는 구조로 만들어야 작업이 가능하답니다.

더불어, 이런 구조적 제한은 Next.js가 최적화를 위해 도입한 부분이라, Partial Prerendering 덕분에 페이지 로딩 성능이 좋아지는 장점도 있으니 이해하고 활용하면 유용해요!

Next.js 15에서 after 메서드 활용하는 최신 방법 2025

Next.js 15에서 sitemap.xml 자동으로 생성하는 방법

# robots.txt 파일 쉽게 만들기

웹사이트를 운영하다 보면, 검색 엔진 봇들이 우리 사이트를 어떻게 크롤링할지 정하는 게 중요한데요. 그럴 때 쓰는 게 바로 **robots.txt** 파일이에요. 이 파일을 웹사이트의 루트 디렉터리에 넣으면, 검색 엔진 크롤러에게 “여기까지는 들어와도 돼”, “여기는 접근하지마”라고 알려줄 수 있죠.

---

## 기본적인 robots.txt 예시

```js
User-Agent: *
Allow: /
Disallow: /private/

Sitemap: https://acme.com/sitemap.xml
```

- `User-Agent: *` : 모든 크롤러에 적용한다는 뜻!  
- `Allow: /` : 사이트 전체를 접근허용해요.  
- `Disallow: /private/` : `/private/` 경로 아래는 크롤링 금지!  
- `Sitemap` : 사이트맵 URL을 알려주면 봇들이 페이지 구조를 더 잘 알 수 있답니다.

---

## 알아두면 좋은 점!

- robots.txt 파일은 “규칙”이지만, 강제성이 없다 보니 악의적인 봇은 무시할 수도 있어요.  
- CSS, JS 같은 리소스가 차단되지 않게 하시는 게 좋아요. 구글 등 주요 검색 엔진은 이런 파일을 분석해서 페이지를 제대로 이해하거든요.  
- 꼭 사이트 루트에 위치해야 하며, 경로를 잘못 넣으면 크롤러가 못 찾을 수 있어요.  
- 사이트맵 URL 적는 것도 함께 하면 SEO에 도움 됩니다!

robots.txt는 단순하면서도 웹사이트 검색 노출을 관리하는 데 중요한 파일이니, 위 내용을 참고해서 꼭 한 번만 세팅해 보세요! 그럼 여러분 사이트에 맞는 최적의 SEO 환경을 만들 수 있을 거예요. 😄


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

## Robots 파일 생성하기

웹사이트를 검색엔진이 어떻게 크롤링해야 하는지 알려주는 `robots.txt` 파일을 Next.js에서 쉽게 만들 수 있어요. 이때 `robots.js` 혹은 `robots.ts` 파일을 만들어서 `Robots` 객체를 반환하면 됩니다.

```js
import type { MetadataRoute } from 'next'

export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: '*',       // 모든 봇에 대해 적용
      allow: '/',           // 루트 디렉토리는 크롤링 허용
      disallow: '/private/', // '/private/' 경로는 크롤링 금지
    },
    sitemap: 'https://acme.com/sitemap.xml', // 사이트맵 위치 지정
  }
}
```

### 알아두면 좋은 점 🌟
- `robots.js`는 Next.js의 **특별한 Route Handler**인데, 기본적으로 캐싱이 되어 있어요.  
- 다만 동적 API(dynamic API)나 동적 구성(dynamic config)을 사용할 경우에는 캐싱되지 않습니다.  
- 이 방식이 더 관리하기 편하고, 직접 `public/robots.txt` 파일을 만들지 않아도 되니 개발 속도가 빨라져요.

### 개인적으로 팁!
- 사이트에 아주 민감한 정보가 있다면, `.env` 파일이나 서버 설정으로 크롤링 금지 경로를 관리하는 것도 좋아요.  
- 그리고 구글 서치 콘솔 같은 도구에 사이트맵 URL을 등록해두면 검색엔진 최적화에도 도움이 됩니다.

이렇게 설정만 하면 여러분 사이트에 맞는 `robots.txt`를 편리하게 관리할 수 있어요! 🕷️🚫


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

출력 예시:

```js
User-Agent: *
Allow: /
Disallow: /private/

Sitemap: https://acme.com/sitemap.xml
```

### 특정 사용자 에이전트 맞춤 설정하기

검색 엔진 봇마다 사이트 크롤링 방식을 다르게 설정하고 싶을 때가 있죠? 이런 경우에는 `rules` 속성에 사용자 에이전트(User-Agent) 배열을 전달해서 각각을 개별적으로 지정할 수 있어요. 예를 들어, 이렇게 활용할 수 있습니다:

```js
rules: [
  {
    userAgent: ['Googlebot', 'Bingbot'],
    allow: ['/public'],
    disallow: ['/private']
  },
  {
    userAgent: ['*'],
    disallow: ['/admin']
  }
]
```

위처럼 하면 `Googlebot`과 `Bingbot`은 `/public` 경로를 허용하고 `/private`는 차단하지만, 모든 다른 봇들은 `/admin` 경로만 차단하도록 설정할 수 있죠.

추가 팁으로, 잘 구성된 `robots.txt`는 검색엔진 최적화(SEO)에도 도움을 주니 꼭 꼼꼼히 작성해 보세요! 그리고 필요하다면 사이트맵 위치도 명확히 표시해주면 크롤러가 사이트 구조를 더 잘 파악할 수 있습니다.


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

이번에는 Next.js에서 `MetadataRoute.Robots` 타입을 이용해 robots.txt를 설정하는 방법에 대해 살펴볼게요.

위 예제 코드를 보면 `robots()` 함수가 `MetadataRoute.Robots` 타입 객체를 반환하고 있습니다. 이 객체는 검색 엔진 크롤러들이 어떤 경로를 탐색할 수 있는지 세밀하게 조절할 수 있어요.

```js
export default function robots(): MetadataRoute.Robots {
  return {
    rules: [
      {
        userAgent: 'Googlebot',
        allow: ['/'],
        disallow: '/private/',
      },
      {
        userAgent: ['Applebot', 'Bingbot'],
        disallow: ['/'],
      },
    ],
    sitemap: 'https://acme.com/sitemap.xml',
  }
}
```

이 설정은 다음과 같은 의미를 갖는데요:

| User-Agent  | Allow | Disallow   |
|-------------|-------|------------|
| Googlebot   | /     | /private/  |
| Applebot    |       | /          |
| Bingbot     |       | /          |

- Googlebot에게는 전체 경로를 허용하지만 `/private/`는 막습니다.
- Applebot과 Bingbot은 사이트 전체 접근 금지입니다.
- Sitemap 위치도 명시되어 있어 크롤러가 쉽게 사이트맵을 찾을 수 있어요.

이렇게 하면 robots.txt는 다음과 같이 생성됩니다:


User-Agent: Googlebot
Allow: /
Disallow: /private/

User-Agent: Applebot
Disallow: /

User-Agent: Bingbot
Disallow: /

Sitemap: https://acme.com/sitemap.xml


### 여기서 알아두면 좋은 점
- `allow`와 `disallow`를 배열로 줄 수도 있어서 여러 경로를 지정할 수 있어요.
- `userAgent`도 문자열 하나나 배열로 여러 봇을 지정 가능해서 편리하죠.
- 사이트맵 URL 꼭 포함하는 걸 추천합니다. 크롤러가 사이트 구조를 더 빠르게 파악하거든요.

이 기능은 Next.js 13부터 정식 지원하면서 서버 컴포넌트 안에서 손쉽게 robots.txt 처리를 할 수 있어요. 예전엔 따로 파일을 만들어야 해서 좀 번거로웠는데, 이제 훨씬 깔끔하게 관리할 수 있답니다.

필요하면 robots.txt뿐만 아니라 `MetadataRoute` 타입으로 `favicon`이나 `manifest`도 관리할 수 있으니까 Next.js 공식 문서도 한번 살펴봐 보세요!


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

```ts
type Robots = {
  rules:
    | {
        userAgent?: string | string[]
        allow?: string | string[]
        disallow?: string | string[]
        crawlDelay?: number
      }
    | Array<{
        userAgent: string | string[]
        allow?: string | string[]
        disallow?: string | string[]
        crawlDelay?: number
      }>
  sitemap?: string | string[]
  host?: string
}
```

## 버전 히스토리

| Version   | Changes               |
|-----------|-----------------------|
| `v13.3.0` | `robots`가 도입되었습니다. |

---

### robots 타입 살짝 풀어보기!

위 타입은 주로 웹사이트의 `robots.txt` 설정을 타입스크립트로 표현한 거예요. 웹 크롤러가 어떤 페이지는 크롤링해도 되고, 어떤 페이지는 금지해야 할 때 `robots.txt`를 사용하는데요, 이런 설정을 코드로 관리할 때 유용하죠.

- `rules`는 크롤러 별로 어떤 경로를 허용(`allow`)하거나 차단(`disallow`)할지 설정해요.
- `userAgent`는 어떤 크롤러에 대한 규칙인지 지정하는 부분이라, Googlebot, Bingbot 등 특정 크롤러 이름을 넣을 수 있어요. 배열로 여러 크롤러를 지정할 수도 있고요.
- `crawlDelay`는 크롤러가 요청 사이에 얼마나 기다려야 하는지 초 단위로 설정합니다.
- `sitemap`은 사이트맵 URL을 명시해 크롤러가 더 효율적으로 페이지를 찾게 돕고,
- `host`는 사이트의 대표 도메인을 지정하는 값이에요.

이 타입으로 `robots.txt`를 프로그램matically(프로그램적으로) 생성하거나, 동적으로 관리하는 툴을 만들 때 큰 도움이 될 거예요!

필요하면 제가 간단한 예제도 함께 만들어볼게요. 관심 있으면 알려주세요!

웹 SEO를 위한 robots.txt 작성과 활용법

Next.js 15에서 OpenGraph-Image와 Twitter-Image 설정하는 방법 

# manifest.json이란?

웹 앱을 만들 때 'manifest.json' 또는 'manifest.webmanifest' 파일을 루트 디렉토리에 넣어주는 게 좋아요. 이 파일은 웹 앱이 어떻게 동작하는지, 어떤 이름을 가졌는지, 아이콘은 무엇인지 등 브라우저가 알아야 할 정보를 담고 있답니다. 쉽게 말해, 내 웹 앱의 소개서를 만들어서 브라우저에게 알려주는 역할이에요.

## 고정된(static) manifest 파일 예시

아래는 간단한 manifest.json 예시입니다. 주로 이런 형식으로 만들어서 프로젝트 루트에 넣어주면 되죠.

```json
{
  "name": "My Next.js Application",
  "short_name": "Next.js App",
  "description": "An application built with Next.js",
  "start_url": "/"
  // 기타 설정들...
}
```

여기서 주요 속성들을 짚어볼게요.

| 속성명       | 설명                                             |
|--------------|--------------------------------------------------|
| name         | 웹 앱의 전체 이름, 기기나 설치 시 표시됨         |
| short_name   | 이름 대신 사용할 짧은 이름, 아이콘 밑 등에서 표시 |
| description  | 앱에 대한 간단한 설명                             |
| start_url    | 앱을 실행할 때 열릴 기본 URL                      |

---

### manifest.json을 왜 넣어야 할까?

* **PWA 지원**: Progressive Web App을 지원하려면 필수! 홈 화면에 아이콘을 추가하거나 오프라인 모드 같은 기능을 쓸 때 manifest가 필요해요.

* **탭 이름 및 아이콘 설정**: 브라우저 탭이나 북마크에 나타나는 이름과 아이콘을 설정할 수 있어요.

* **앱처럼 보이게 하기**: 풀스크린 모드, 방향 고정 등 다양한 옵션도 manifest에서 설정 가능하니 더 앱다운 느낌을 줄 수 있죠.

---

### 참고! manifest.json에 자주 쓰이는 주요 옵션들

| 속성명          | 설명                                                          |
|-----------------|---------------------------------------------------------------|
| icons           | 앱 아이콘 목록, 크기별 이미지를 배열로 넣음                     |
| display         | 앱이 실행될 때 UI 모드 (예: standalone, fullscreen, minimal-ui) |
| background_color| 앱 시작화면 배경색                                           |
| theme_color     | 브라우저 툴바 색상 등, 테마 컬러                               |
| scope           | 앱의 유효 범위 URL, 이 범위 내에서만 앱으로 인식됨             |

---

manifest.json 설정만 잘해줘도 사용자 경험이 크게 향상되니, Next.js 같은 프레임워크에서 PWA를 고민한다면 꼭 챙겨보세요!


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

## 매니페스트 파일 생성하기

이번에는 `manifest.js` 또는 `manifest.ts` 파일을 만들어서 `Manifest` 객체를 반환하는 방법을 알려드릴게요.

> 참고로 `manifest.js`는 Next.js의 특별한 Route Handler 중 하나예요. 기본적으로 캐시가 되지만, 만약 동적 API나 동적 설정 옵션을 사용하면 캐시되지 않아요.

```js
import type { MetadataRoute } from 'next'
 
export default function manifest(): MetadataRoute.Manifest {
  return {
    name: 'Next.js App',
    short_name: 'Next.js App',
    description: 'Next.js App',
    start_url: '/',
    display: 'standalone',
    background_color: '#fff',
    theme_color: '#fff',
    icons: [
      {
        src: '/favicon.ico',
        sizes: 'any',
        type: 'image/x-icon',
      },
    ],
  }
}
```

### 더 알아두면 좋은 팁!
- `start_url`은 사용자가 앱을 실행했을 때 기본으로 열리는 경로를 설정하는 거예요. 보통 루트(`/`)로 지정하지만 필요에 따라 다르게 할 수 있어요.
- `display` 옵션에는 `'standalone'` 외에도 `'fullscreen'`, `'minimal-ui'`, `'browser'` 등이 있어요. 각 옵션마다 앱을 어떻게 보여줄지 달라지니 원하는 사용자 경험에 맞게 선택하세요.
- `icons` 배열에는 여러 크기의 아이콘을 넣어두는 게 좋아요. 그래야 다양한 기기와 해상도에서 깔끔하게 앱 아이콘이 보여지거든요.

덤으로 매니페스트 파일은 PWA(Progressive Web App)를 만들 때 꼭 필요한 파일이니, 만약 여러분이 웹 앱을 좀 더 앱처럼 보이고 싶다면 꼭 만들어 보세요!


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

### Manifest Object

Manifest Object는 웹 표준이 새로워짐에 따라 업데이트될 수 있는 다양한 옵션들을 담고 있는 객체예요. 최신 옵션들에 대해 자세히 알고 싶다면, TypeScript를 사용 중이라면 코드 에디터 안에서 `MetadataRoute.Manifest` 타입을 참고하는 게 가장 확실하고요. 그렇지 않으면 [MDN 문서](https://developer.mozilla.org/en-US/docs/Web/Manifest)를 보는 것도 좋은 방법이에요.

참고로, Manifest Object는 주로 웹 앱이 어떻게 보이고 동작할지를 정의하는데 쓰여서, 푸시 알림, 아이콘, 시작 URL, 테마 컬러 같은 설정들을 포함하죠. 요즘에는 PWA(Progressive Web App)를 만들 때 꼭 필요한 요소 중 하나랍니다. 그래서 웹앱 개발자라면 한 번쯤 꼼꼼히 살펴볼 만한 부분이에요!

Nextjs15에서 manifest.json 설정하는 방법

# 메타데이터 파일 API 가이드

이번 글에서는 메타데이터 파일에 관한 규칙과 사용법에 대해 다뤄볼게요. Next.js에선 "파일 기반 메타데이터"를 사용해서 각 경로(route)별로 메타 정보를 관리할 수 있어요.

기본 아이디어는 특별한 메타데이터 파일들을 경로 폴더 안에 넣는 건데요, 크게 두 가지 방식으로 만들 수 있어요.

- 정적 파일: 예를 들어 `opengraph-image.jpg` 같은 이미지 파일을 그대로 넣는 경우
- 동적 파일: 예를 들어 `opengraph-image.js` 같이 코드를 실행해서 파일을 생성하는 경우

파일을 이렇게 정의하면 Next.js가 알아서 이 파일들을 서빙해주고, 프로덕션 환경에선 캐싱을 위해 파일명에 해시 값을 붙여 관리해줘요. 그리고 페이지의 `<head>` 태그에 이 메타데이터에 맞게 URL, 파일 타입, 이미지 크기 같은 정보들을 자동으로 업데이트해줍니다.

---

이걸 이용하면 여러분이 직접 `<meta>` 태그나 `<link>` 태그를 일일이 관리하는 수고를 줄일 수 있어요. 특히 SEO 최적화나 소셜 미디어 같은 외부 서비스에 정확한 정보를 보여줘야 할 때 매우 유용하답니다. 

그리고 동적 파일이 지원된다는 건, 상황에 따라 이미지나 메타 정보를 프로그래밍적으로 생성할 수 있다는 뜻이에요. 예를 들어 사용자 맞춤형 오픈그래프 이미지 만들기 같은 작업도 할 수 있겠죠.

다음에는 실제 예시를 통해 어떻게 파일을 만들고 구성하는지 구체적으로 살펴볼게요!


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

> 알아두면 좋은 팁:
특별한 라우트 핸들러들 — 예를 들어 sitemap.ts, opengraph-image.tsx, icon.tsx 같은 메타데이터 파일들은 기본적으로 캐싱이 됩니다.  
middleware.ts와 함께 사용할 때는, 메타데이터 파일들이 캐싱 문제로 꼬이지 않도록 matcher 설정에서 이 파일들을 제외해 주는 게 좋아요.

사실 이런 메타데이터 파일들은 자주 변경되지 않기 때문에 캐싱하는 게 성능 측면에서 유리하지만, 만약 미들웨어에서 특정 로직으로 캐싱을 우회해야 한다면 꼭 matcher를 잘 설정해 주세요. 그러면 불필요한 리퀘스트 차단이나 잘못된 데이터 제공 문제를 예방할 수 있거든요.

혹시 middleware.ts를 처음 사용하신다면, matcher 옵션에 대해 간단히 설명하자면, 이 옵션을 통해 미들웨어가 적용될 URL 패턴을 정할 수 있는데, 여기서 제외 패턴을 설정하면 특정 파일이나 경로는 미들웨어의 적용 대상에서 빠집니다. 아주 유용하니 꼭 기억해두세요!

Posts