Next.jsで動的にRSSフィードを生成する
先日Next.jsでXML Sitemapを生成する方法を書きました。同じ要領でRSSフィードの実装もできるので記事にしておきます。 Next.jsのgetServerSidePropsで動的にRSSフィードを生成 Next.js（TypeScript）のPageコンポーネントの中で実装を行います。例として/feedにアクセスしたときにRSSフィードが表示されるように/pages/feed.tsxというファイルを作成します。 getServerSidePropsを使う理由 このサンプルでは、RSSデータの生成からレスポンスの返却までgetServerSidePropsの中で行います。getServerSidePropsは本来はPageコンポーネント内で使うpropsを取得するためのものですが、ここではpageコンポーネントを介さずに直接レスポンスを返却してしまいます。 というのもPageコ
Next.jsで動的にXMLサイトマップを生成する
2021年1月現在、Next.jsでXMLサイトマップを生成するライブラリとしてはnextjs-sitemap-generatorが最も人気のようです。 nextjs-sitemap-generatorのドキュメントを軽く読む限り、Next.jsのCustom Serverを使用してビルド時にサイトマップを生成する仕組みのようなので、以下のようなケースでの使用には最適とは言えません。 Custom Serverは触りたくない コンテンツ追加のタイミングでビルドが走らないユーザー投稿型のサイトでも、サイトマップを一定間隔で更新したい 個人的に色々と試してみたところ、思った以上に簡単にXMLサイトマップを動的に作ることができたので、その方法を共有します。 Next.js + TypeScriptで動的にXML Sitemapを生成する 以下のような方針で実装します。 sitemap.xmlをN
Next.jsでページ共通の処理をする（useEffectを使う例）
Nuxt.jsだとmiddlewareという機能を使うことで、ページの遷移ごとに特定の処理をはさむことができます。 Next.jsで全ページで特定の処理をはさむためには、Appコンポーネント（_app.tsx）にその処理を書くことになります。 Next.jsの_app.tsxに全ページ共通の処理を書く 参考：Next.jsの_app.tsxのカスタマイズ（TypeScript） import type { AppProps } from 'next/app' import { useEffect } from 'react'; function MyApp({ Component, pageProps, router }: AppProps) { + useEffect(() => { + // ここに全ページ共通で行う処理 + },[router.pathname]) return <C
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
