[Next.js][App router]將URL參數的訊息顯示在網頁中Typescript

使用URL的參數(URL parameter)來顯示訊息是一種方便的作法。在SPA中也能使用，不需要有後端server的幫助。

這裡整理React.js和Next.js中用URL parameter來顯示訊息的方法，由於Next.js App router，這裡會都演示一次。

後端方面，稱為Query Parameter，在express等框架中使用req.query來存取

而web前端方面，則會用Search Parameter，是因為有了Web API: URLSearchParams

1. 以React來寫

import * as React from 'react';

import Typography from '@mui/material/Typography';

export default function App() {

const [message, setMessage] = React.useState<string>();

React.useEffect(() => {

const params = new URLSearchParams(window.location.search);

const t = params.get('type') || '不明錯誤';

const m = params.get('message') || '無更多細節資訊';

setMessage(`${t} : ${m}`);

}, []);

return (

<Typography>{message}</Typography>

);

}

因Next.js的App router為有Server Component和Client Component兩種寫法所以

2. 以App router的Server Component來寫

放置在src/app/error/page.tsx

import Typography from '@mui/material/Typography';

type Props = {

searchParams: { [key: string]: string | string[] | undefined };

};

export default function ErrorPage({ searchParams }: Props) {

const type = searchParams['type'] || '不明錯誤';

const message = searchParams['message'] || '無更多細節資訊';

return (

<Typography>

{`${type} : ${message}`}

</Typography>

);

}

透過Next.js提供的searchParams屬性就能取得所需的訊息資料，再透過簡單字串組合就能生成想要的訊息。

3. 以App router的Client Component來寫

放置在src/app/error/page.tsx

'use client';

import * as React from 'react';

import Typography from '@mui/material/Typography';

import { useSearchParams } from 'next/navigation';

function MessageBoard() {

const [message, setMessage] = React.useState<string>();

const params = useSearchParams();

React.useEffect(() => {

if (params) {

const t = params.get('type') || '不明錯誤';

const m = params.get('message') || '無更多細節資訊';

setMessage(`${t} : ${m}`);

}

}, [params]);

return (<Typography>{message}</Typography>);

}

export default function ErrorPage() {

return (

<React.Suspense fallback={<div>Loading...</div>}>

<MessageBoard />

</React.Suspense>

);

}

這裡多出了Suspense是因為Next.js生成靜態網頁時會建議

useSearchParams() should be wrapped in a suspense boundary at page

如果你想要套用第一個現成React的寫法，會發現next.js在build的時候會出現無法理解的錯誤，所以建議你若要套用現成寫法，請將元件設定成'use client'，如此一來會減少你很多debug的時間。