# 1. 서론 블로그에 아직 404페이지가 따로 없기 때문에 404페이지를 만들어보기로 한다. # 2. Next.js app router의 404페이지 구현방법 Next.js 공식 문서에서는 app router 환경에서 404페이지를 만들려면 not-found.js 파일을 만들면 된다고 적혀있다. not-found.js는 기본적으로 Server Component이며 (물론 Client Component로도 사용 가능), props를 사용할 수 없다. 또한 app폴더 아래에 위치해야 하고, 해당 폴더 내에는 반드시 layout.js가 있어야 한다. ```typescript // not-found.js 코드 예시 import Link from 'next/link' export default function NotFound() { return (

Not Found

Could not find requested resource

Return Home

) } ``` 문제는 현재 폴더 구조가 ```src/app/[locale]```이기 때문에 ```app/not-found.js```는, NextIntlClientProvider 바깥에 위치하게 되어 locale 데이터를 사용할 수 없다는 점이다. ![16011c99-8a07-47f2-a807-7a6c33bab832](https://nfiqmgurjakbthpolcci.supabase.co/storage/v1/object/public/blog/content-images/ritworld-404/16011c99-8a07-47f2-a807-7a6c33bab832) ###### 데굴데굴 굴러갑니다~ 그래서 이렇게 (킹받는) 기본 404페이지가 완성되었다. # 3. Next.js app router + next-intl 환경에서 404페이지 구현하기 위의 404페이지의 경우 - localhost:3000/sdfsd - localhost:3000/ko/sdfsdf -까지는 잘 대응이 됐다. 하지만 - app/[locale]/(main)/post/[blog]/page.tsx내부의 notFound() -> 즉, localhost:3000/ko/post/sfdsdfsdf 이 케이스에서는 계속 Next.js의 기본 404페이지가 표시되었다. 그래서 [locale] 폴더 내부에 not-found.js를 하나 더 만들기로 했다. 이것도 마찬가지로 해당 폴더 내에 layout.js가 반드시 있어야 하다. Server Component의 경우 ```typescript // app/[locale]/layout.tsx export default async function LocaleLayout({ children, params: { locale }, }: { children: React.ReactNode; params: { locale: string }; }) { if (!routing.locales.includes(locale as any)) { notFound(); } ... ``` 이렇게 props로 동적 라우팅 값을 가져올 수가 있는데 앞서 말했듯이 not-found.js에는 props를 쓸 수 없고, 기본적으로는 Server Component이기 때문에 next-intl에서 제공하는 useTranslations 또한 Client Component 전용이므로 쓸 수 없었다. 대신 Server Component에서 사용할 수 있는 getTranslations이라는 걸 제공한다. ```typescript // app/[locale]/not-found.tsx import { getTranslations } from "next-intl/server"; import { NotFoundTitle, RedirectButton } from "features/NotFound"; export default async function NotFound() { const t = await getTranslations("NotFound"); return (

{t("subject")}

); } ``` ![b3fe6252-5cb2-436b-9085-453d3e0f9e94](https://nfiqmgurjakbthpolcci.supabase.co/storage/v1/object/public/blog/content-images/ritworld-404/b3fe6252-5cb2-436b-9085-453d3e0f9e94) ![1269440f-76c3-4e1e-9b5e-25d93f36f080](https://nfiqmgurjakbthpolcci.supabase.co/storage/v1/object/public/blog/content-images/ritworld-404/1269440f-76c3-4e1e-9b5e-25d93f36f080) 그럼 이렇게 일본어/한국어 모두 정상적으로 대응이 된다. # 4. 사실은 3이 실행되지 않아서... 지금 블로그를 쓰면서 다시 테스트를 해보니 3번에서 만든 not-found가 없어도 ```localhost:3000/ko/post/sfdsdfsdf```경로 역시 ```app/not-found.js```로 대응이 가능했다. 하지만 해당 페이지를 처음 구현 당시에는 계속 Next.js의 기본 404페이지만 떠서 저 url을 대응하려고 not-found.js 위치도 옮겨도 보고 GPT랑 대화도 엄청하고, 구글링도 해봤는데 해결이 안 됐었다. 계속 안 되니까 결국 Client Component로 구현하는 것도 포기했었다. 의외로 해답은 VS Code의 Gemini Code Assist가 제공했다. 현재 ```app/[locale]/(main)/post/[blog]/page.tsx```내부 코드는 크게 세가지로 구성되어 있다. 1. (SEO용) generateMetadata 함수 2. 블로그 상세페이지 컴포넌트 3. 위 두곳에서 공통으로 사용하는 API호출 & 블로그 데이터 반환 함수 그리고 코드는 아래와 같다. ```typescript // app/[locale]/(main)/post/[blog]/page.tsx import { notFound } from "next/navigation"; const getPageData = async (locale: string, blog: string) => { const blogData = locale === "ko" ? await getBlogByPath(blog) : await getBlogByPathJp(blog); if (!blogData) { notFound(); } return blogData; }; export const generateMetadata = async ({ params: { locale, blog }, }: { params: { locale: string; blog: string }; }) => { const blogData = await getPageData(locale, blog); const keywords = blogData.blog_hashtag ?.map((hash: BlogHashtagType) => hash.hashtag_id.name) .join(", ") || ""; return { title: blogData.subject, description: blogData.summary, keywords: keywords, openGraph: { title: blogData.subject, description: blogData.summary, url: `https://ritworld.dev/${locale}/post/${blog}`, images: [ { url: blogData.thumbnail || DefaultImage.src, alt: blogData.subject, width: 1200, height: 630, }, ], }, twitter: { card: "summary_large_image", title: blogData.subject, description: blogData.summary, images: [blogData.thumbnail || DefaultImage.src], }, }; }; const BlogContentPage = async ({ params: { locale, blog }, }: { params: { locale: string; blog: string }; }) => { const blogData = await getPageData(locale, blog); return ( <> ); }; export default BlogContentPage; ``` 이 코드가 동작하는 순서는 다음과 같다. 1. Next.js가 URL을 보고 어떤 라우트를 사용할지 결정함 2. SSR 이전에 generateMetadata를 먼저 실행되면서 head 관련 데이터를 구성 3. 그 후 BlogContentPage가 실행됨 문제는 generateMetadata에서 getPageData를 호출하는데 여기서 notFound()를 던지면 generateMetadata는 Error Boundary 밖에서 실행되기 때문에 이 에러가 정상적으로 핸들링이 되지 않는다. 그래서 Next.js 기본 404페이지가 뜨게 된 것이다. 그래서 이렇게 코드를 수정했다. 1. generateMetadata에서는 데이터가 없을 때 기본 메타데이터만 리턴 2. BlogContentPage에서만 notFound()를 실행하도록 변경 3. API요청은 cache()로 감싸서 캐싱 처리 최종 코드는 아래와 같다. ```typescript import { cache } from "react"; import { notFound } from "next/navigation"; import DefaultImage from "public/assets/image/default-image.jpg"; import BlogContentScreen from "page/BlogContent/ui/BlogContentScreen"; import { BlogHashtagType, getBlogByPath, getBlogByPathJp } from "entities/blog"; const getCachedBlogData = cache(async (locale: string, blog: string) => { return locale === "ko" ? await getBlogByPath(blog) : await getBlogByPathJp(blog); }); export const generateMetadata = async ({ params: { locale, blog }, }: { params: { locale: string; blog: string }; }) => { const blogData = await getCachedBlogData(locale, blog); if (!blogData) { return { title: "Not Found", description: "The page was not found." }; } const keywords = blogData.blog_hashtag ?.map((hash: BlogHashtagType) => hash.hashtag_id.name) .join(", ") || ""; return { title: blogData.subject, description: blogData.summary, keywords: keywords, openGraph: { title: blogData.subject, description: blogData.summary, url: `https://ritworld.dev/${locale}/post/${blog}`, images: [ { url: blogData.thumbnail || DefaultImage.src, alt: blogData.subject, width: 1200, height: 630, }, ], }, twitter: { card: "summary_large_image", title: blogData.subject, description: blogData.summary, images: [blogData.thumbnail || DefaultImage.src], }, }; }; const BlogContentPage = async ({ params: { locale, blog }, }: { params: { locale: string; blog: string }; }) => { const blogData = await getCachedBlogData(locale, blog); if (!blogData) { notFound(); } return ( <> ); }; export default BlogContentPage; ``` # 5. 결론 404페이지 디버깅을 하다가 Next.js 구동원리에 대해 알게 된 날이었다..