はじめに
Next.js13.4の新機能でApp Routerが追加されました。
ファイルシステムベースのRouterのことで、Server Componentなど新機能に対応しています。
AppRouterでは、すべてのコンポーネントがServer Componentになったことから、Client Componentとして利用する場合、ファイルの先頭に”use client”をつける必要があります。
これまで、Next.jsのレンダリングは、SSR（サーバーサイドレンダリング）とSSG（Static Site Generator)が使用されることが一般的でしたが、アップデートにより、ますますSSRファーストなフレームワークになってきています。
SSGの場合、SSRとして開発をしてビルドすると、動的ページでエラーが発生します。アップデート以前の話でもありますが、動的ページ処理は、getServerSidePropsやgetStaticPropsを使用していました。ただ、今回のアップデートにより、それらが廃止されました。
実装しようものなら、以下のようなエラーが発生します。
“getStaticProps” is not supported in app/
そして新たに、generateStaticParamsが追加されました。基本的にgenerateStaticParamsを使用して動的ページを生成していきます。
以下もgenerateStaticParamsを使用して実装します。
環境
- Next.js：14.0.4
generateStaticParamsを使って動的ページを作成
データの作成
今回は、同じプロジェクト内にデータ用のファイルを作成します。
src/constant/item.ts
type ItemsType = {
id:number,
name:string
}
export const Items:ItemsType[] = [
{
id:1,
name:"あめ"
},
{
id:2,
name:"めだか"
}
];
動的ページの作成
パスは、以下のように設定します。
src/app/item/[id]/page.tsx
import { NextPage } from 'next';
import { Items } from '@/constant/items';
type Props = {
params: {
id: number;
};
};
const DynamicView: NextPage = (props) => {
const item = Items.filter(item => item.id == props.params.id)[0];
return (
<>
{item.name}
</>
);
};
export default DynamicView;
export const generateStaticParams = async()=> {
const paths = await Items.map((item) => ({
params: { id: item.id.toString()}
}));
return paths.map((post) => (
post.params
));
}
generateStaticParamsにおいて、ビルド時に動的ページを静的にルートを生成します。
localhost:3000://item/1、item/2が生成され、
それぞれのURLでアクセスすると、ビューには1のとき「あめ」、2のとき「めだか」が表示されます。
おわりに
Remixも然り、基調SSRを使用しフロントエンドからバックエンドまでカバーし、ノンストップでスピーディーに開発できるFWが主流となっています。
また、クライアントのスペックに依存せず、サーバのスケーリングによって対応できるのが魅力的です。
SSRに対応している他言語のバックエンドもあるものの、主流はNode.jsでしょう。
レンタルサーバのような環境であればNode.jsを動かすのは厳しく、SSGが使われることもまだまだ多くあるでしょう。
私も基本SSGで開発をしておりましたが、今後、リアルタイム性の求められるサービスも作成したいので、近いうちにSSRにもチャレンジをしてみたいです。
コメント