設置 not-found 頁面 === ###### With Next.js App Router + next-intl :::info :radio_button: [回到目錄攻略](https://hackmd.io/@hJJ8etrATgudRfKA1gryew/BJiplPwMC) ::: 1.擷取到未知路徑 --- 在==next-intl==的設定裡，如果網址在基本網域上呈現似像非像的樣子，或該頁面已遭刪除，例如`http://localhost:3000/zh/main89754` 或 `http://localhost:3000/zh/jdo....8`，皆可跳轉至**自製**not-found頁面告知使用者。 <font color="#F7A004">**步驟一：加入[...rest]資料夾和not-found頁面，位置如下**</font> ``` └── src └── app └── [locale] ├── [...rest] (+) │ └── page.tsx (+) ├── not-found.tsx (+) ├── layout.tsx └── main └── page.tsx ``` <font color="#F7A004">**步驟二：寫入程式**</font> > @locale/[...rest]/page.tsx ```typescript= import { notFound } from "next/navigation"; export default function CatchAllPage() { notFound(); } ``` > @locale/not-found.tsx 這是初步的自設NF頁面，還是可以自由選改的哟。 ```typescript= import { Link } from "@lib/navigation"; import { useTranslations } from "next-intl"; export default function NotFound() { const t = useTranslations(); return ( <div> <h1>{t("not-found-title")}</h1> <Link href="/main">{t("not-found-return")}</Link> </div> ); } ``` <font color="#F7A004">**小看一下結果**</font> ![image](https://hackmd.io/_uploads/H1tILMwMA.png) ![image](https://hackmd.io/_uploads/HythLzwMC.png) 2.擷取到非本地化請求 --- 當使用者要求中間件不符的路由時，next-intl沒有與該請求關聯的區域設定（取決於在middleware裡配置matcher）可以新增根not-found頁面來處理這些情況。而這個頁面則是框架本身的**內建/預設**的。 <font color="#F7A004">**步驟一：加入[...rest]資料夾和not-found頁面，位置如下**</font> ``` └── src └── app └── [locale] └── not-found.tsx (+) └── layout.tsx (+) ``` <font color="#F7A004">**步驟二：寫入程式**</font> > @app/layout.tsx ```typescript= import { ReactNode } from "react"; type Props = { children: ReactNode; }; // Since we have a `not-found.tsx` page on the root, a layout file // is required, even if it's just passing children through. export default function RootLayout({ children }: Props) { return children; } ``` > @app/not-found.tsx ```typescript= "use client"; import Error from "next/error"; // Render the default Next.js 404 page when a route // is requested that doesn't match the middleware and // therefore doesn't have a locale associated with it. type Props = { params: { locale: string } }; export default function NotFound({ params: { locale } }: Props) { return ( <html lang={locale}> <body> <Error statusCode={404} /> </body> </html> ); } ``` 3.結語 --- 統整來說： :::success - 未知路徑 - 自製not-found頁 - 非本地化請求 - 預設not-found頁 ::: 最必要做的即是自製not-found頁。其實所捕獲的「未知路線」已包含大範圍的網址錯誤了，相較於第二點的「非本地化請求」，本人是都還沒遇到過，但為了以防萬一，還是有設置了這樣的預設not-found頁。 也因為設置了兩種情況的not-found頁，所以... ![image](https://hackmd.io/_uploads/HJiQZ7Pz0.png) 會出現兩款`layout.tsx`和`not-found.tsx`哟！ 4.資訊 --- - [Internationalization in Next.js error files](https://next-intl-docs.vercel.app/docs/environments/error-files#catching-unknown-routes)