getStaticPropsとは？
- Next.js内（フロントエンド）で定義した関数が必ずバックエンドで実行される。
- pages内でのみ使用可能
- 「npm run dev」の場合はリクエスト毎に実行される。
- 「npm start」の場合はビルド毎に実行される。
注意点
getStaticProps内で取得に失敗した場合は取得に失敗した内容で静的ページが生成されることになります。なので、別記事で紹介しているISRなどを使うなどしてあげる必要があります。指定に忘れて最初のアクセスでエラーになるととんでもないことになります。
ソースコード
getStaticPropsはビルド時に1回だけ実行されます。getStaticPropsの戻り値はpropsになり、定義したコンポーネントの引数に渡るようにできます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
import fetch from 'node-fetch'; // 引数として「getStaticProps」の戻り値を受け取れる。 const Sample = ({ jsons }) => { return ( <ul > {表示処理} </ul> ); }; export async function getStaticProps() { const res = await fetch(new URL("APIのURL")); const jsons = await res.json(); return { props: { jsons }, }; } export default Blog; |
Dynamic routesとは？
個別ページを取得する方法になります。
ディレクトリ構成
pages配下に個別ページを格納するためのディレクトリを作成して[id].jsと言うファイルを作成します。
|
1 2 3 |
pages └xxxs(articlesなど) └[id].js |
Dynamic routesの流れ
1.getStaticPathsでidの一覧を取得する。
「npm run dev」であれば、リクエストの度に毎回実行されます。「npm run build」であれば一度だけ実行されて、その後の「2」が何度も実行される形になります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
export async function getStaticPaths() { const res = await fetch(new URL(apiUrl)); const articles = await res.json(); const paths = articles.map((post) => { return { params: { id: String(post.id), }, }; }); return { paths, fallback: false, }; } |
fallback
存在しないidにアクセスした際の挙動を設定できます。falseを設定した場合は404を返します。
ただ、falseを設定している状態で、新しくページが作られていた場合でも404が表示されてしまいます。
そうした場合は、trueを指定する事で新しくページにアクセスした際に動的にページが生成されます。（なお、生成には時間がかかるのでLoadingを設定するようにしましょう。）なお、trueにした状態で全く存在しないページにアクセスした場合は、404が帰えるわけではなく空のページが動的に生成される挙動になります。
2.getStaticPropsで1.で取得した各idを使用して個別情報を取得する。
|
1 2 3 4 5 6 7 8 9 10 |
export async function getStaticProps({ params }) { const res = await fetch(new URL(`${apiUrl}/${params.id}/`)); const article = await res.json(); return { props: { article, }, }; } |
3.pre-renderingを行う。
「npm run build」を実行した際に、「.next/server/pages/articles/1.html」などのファイルが大量に生成されてpre-renderingが行われることになります。
この記事へのコメントはありません。