---
# System prepended metadata

title: 設置 not-found 頁面
tags: [Next.Js 14 with APP Router]

---

設置 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)