<h2 id="h8d027c8ed3">はじめに</h2><p>本記事は Next.js, (React, TypeScript,) Vercel, Headless CMS を利用して静的ブログサイトを作成するチュートリアルです。<br><br>Next.js と Vercel を利用することで、優れた DX とサイトパフォーマンスをすぐさま享受できます。また、TypeScript を用いるフロントエンド開発環境の構築も簡単に行えます。<br>本記事を読むことで、その開発体験とそれぞれの一部機能を理解することができます。<br><br>本サイト (shunke07.com) はまさに上記の技術スタックで構成しています。また、本サイトの Lighthouse スコア（CDN キャッシュが存在する場合の結果）は次の画像の通りです。<br><br><img src="https://images.microcms-assets.io/protected/ap-northeast-1:f6028a15-6dd3-463d-a5b2-c16502cd2746/service/shunke-blog/media/lighthouse-score.png" alt=""><br><br><strong>利用する CMS について</strong><br>本記事の内容は Next.js とTypeScript を利用したフロントエンドの構築にフォーカスしており、CMS 側の設定は省略しています。また、設定は各サービスごとに異なるため、それぞれの公式ドキュメントを参考にしていただけますと幸いです。<br><br>実際は REST API の API Key とレスポンスが異なるのみで、Headless CMS の設定の差異をフロントエンドで意識することはあまりないはずです。<br><br>なお、本記事では日本製の <a href="https://microcms.io/" target="_blank" rel="noopener noreferrer">microCMS</a> を取り扱います。設定方法は<a href="https://microcms.io/docs/manual/getting-started" target="_blank" rel="noopener noreferrer">公式ドキュメント</a>にて解説されていますのでそちらをご覧下さい。<br><br><strong>用語</strong></p><ul><li><a href="https://nextjs.org/docs" target="_blank" rel="noopener noreferrer">Next.js</a>：React のフレームワークです。サーバーサイドレンダリング（SSR、本記事では扱いません）のほか、後述する Static Generation など、様々なモダンフロントエンドに対応する機能を備えています。</li><li><a href="https://vercel.com/docs" target="_blank" rel="noopener noreferrer">Vercel</a>： Next.js を開発している会社です。また、同社が提供するホスティングサービスの名称でもあります。</li><li><a href="https://nextjs.org/docs/basic-features/pages#static-generation-recommended" target="_blank" rel="noopener noreferrer">Static Generation</a>：HTML を生成する方法の1つです。この方法では、ビルド時に HTML を生成し、各リクエストに対して再利用されます。本記事では、Next.js と Vercel を通して利用します。</li><li>Headless CMS：フロントエンドから切り離された、バックエンドのみを提供する CMS です。主に REST API を介してコンテンツにアクセスします。本記事で取り扱う microCMS の公式ブログでは <a href="https://microcms.io/blog/what-is-headlesscms/" target="_blank" rel="noopener noreferrer">Headless CMS の解説記事</a>が公開されています。</li></ul><h2 id="he4bfbf1fe7">TL;DR</h2><ul><li><a href="https://github.com/shunke07/next-blog" target="_blank" rel="noopener noreferrer"><strong>ソースコード</strong></a></li><li><a href="https://next-blog.shunke07.vercel.app/" target="_blank" rel="noopener noreferrer"><strong>デモサイト</strong></a></li></ul><p><br>記事内では一部コードを省略した形で記載していますので、全体の記述は上記ソースコードをご参照下さい。また、上記ソースコードは本記事の内容に加えて、別記事で解説する内容なども含んでいます。<br><br>なお、Vercel による各 Headless CMS を利用したサンプルコードも公開されています。 GitHub の next.js リポジトリ内で公開されており、それらへのリンクは<a href="https://nextjs.org/docs/basic-features/data-fetching" target="_blank" rel="noopener noreferrer">公式ドキュメント</a>に記載されています。</p><h2 id="h67d2b7be6b">バージョン</h2><p>本記事の内容は、下記のパッケージバージョンを前提としています。バージョンの差異によって、一部機能が異なる可能性があります。<br></p><ul><li>next: 10.0.5</li><li>react: 17.0.1</li><li>react-dom: 17.0.1</li></ul><h2 id="h4d98fca536">Next.jsプロジェクトとTypeScriptのセットアップ</h2><p>本記事では <code>yarn</code> を使用します。<code>npm</code> を使用する場合は適宜コマンドを置換して、同様に行ってください。<br></p><pre><code>yarn create next-app &lt;your-project-name&gt;
cd &lt;your-project-name&gt;</code></pre><p><br>下記のコマンドを使用すると Next.js によって、<code>tsconfig.json</code> にデフォルトのルールが適用されます。また、<code>next-env.d.ts</code> ファイルが生成されます。ここで生成された <code>tsconfig.json</code> は <code>strict</code> オプションが <code>false</code> になっていますので、<code>true</code> に変更しましょう。<br></p><pre><code>touch tsconfig.json
yarn add --dev typescript @types/react @types/node
yarn dev</code></pre><p><br>Create Next App で作成された <code>.js</code> ファイル群を <code>.tsx</code> ファイルへと更新しましょう。型定義も提供されていますので、<code>_app.tsx </code>と <code>index.tsx</code> はそれぞれ下記のように変更しましょう。<br></p><pre><code>// _app.tsx
import { AppProps } from 'next/app'
//...
const App = ({ Component, pageProps }: AppProps): JSX.Element =&gt; (
&nbsp;&lt;Component {...pageProps} /&gt;
)
export default App

// index.tsx
import { NextPage } from 'next'
//...​
const Home: NextPage = () =&gt; {
&nbsp;//...
}
export default Home</code></pre><p><br><strong>src ディレクトリ</strong><br>Next.js では <a href="https://nextjs.org/docs/advanced-features/src-directory" target="_blank" rel="noopener noreferrer">src ディレクトリがサポートされています</a>。<code>/src</code> を作成し、<code>/pages, /styles </code>を <code>/src</code> 配下に移動しておきましょう。<br><br><strong>絶対パスとパスエイリアス</strong><br>Next.js では<a href="https://nextjs.org/docs/advanced-features/module-path-aliases" target="_blank" rel="noopener noreferrer">絶対パスとパスエイリアスがサポートされています</a>。<code>tsconfig.json</code> の <code>compilerOptions</code> に下記を追記しましょう。この設定によって、<code>styles</code> 以下のファイルは <code>@/styles/</code> のパスで指定できますので、各ファイルのインポート文を更新しましょう。<br></p><pre><code>// tsconfig.json
"compilerOptions": {
 "baseUrl": "./src",
 "paths": {
  "@/styles/*": ["styles/*"] 
 }
&nbsp;// ...
}</code></pre><p><br>また、必要に応じて、<code>/components </code>などのディレクトリを追加するごとに <code>paths</code> の設定も追加していきましょう。</p><h3 id="h708a166570">CMS の連携</h3><p>各 CMS によって異なります。CMS の設定に従って、クライアント API Key を取得しておきます。</p><h3 id="h8f84803eac">環境変数の設定（.env.local の作成）</h3><p><a href="https://nextjs.org/docs/basic-features/environment-variables" target="_blank" rel="noopener noreferrer">Next.jsではいくつかの .env ファイルがサポートされています</a>。本記事では、 <code>.env.local</code> ファイルのみを取り扱います。<br><br>ファイルを作成し、以下を記述します。<code>&lt;your-cms-api-key&gt;</code> は上記で取得した API Key に置換してください。<br></p><pre><code>// .env.local
CMS_API_KEY=&lt;your-cms-api-key&gt;</code></pre><h2 id="h9dcc071ccd">デプロイ</h2><p>Vercel は Git と連携し、CI/CD によるデプロイを行います。リポジトリを用意して Vercel の連携設定を行います。詳しくは<a href="https://vercel.com/docs" target="_blank" rel="noopener noreferrer">公式ドキュメント</a>をご参照下さい。<br><br>上記で設定した環境変数を Vercel のホスティングサイトに対しても適用します。<br>Vercel のダッシュボードから、対象プロジェクト &gt; Settings &gt; Enviroment Variables と進み、下記画像のように API Key を入力して保存してください。<br><br><img src="https://images.microcms-assets.io/protected/ap-northeast-1:f6028a15-6dd3-463d-a5b2-c16502cd2746/service/shunke-blog/media/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-01-14%2021.25.03.png" alt=""><br><br>その後、GitHub の main ブランチにコードをプッシュすることでビルド・デプロイが行われ、サイトが公開されます。</p><h2 id="h3f81c86191">クライアントロジック</h2><p>ここからは、クライアントのロジックをコーディングしていきます。</p><h3 id="hc3b955e28f">Static Generation に関する API</h3><h4 id="h599726f67e"><strong>GetStaticProps</strong></h4><p><code>getStaticProps</code> という非同期関数を <code>pages</code> 内のコンポーネントで <code>export</code> すると、そのページはその関数の戻り値を伴い静的ビルドされます。<a href="https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation" target="_blank" rel="noopener noreferrer">公式ドキュメントはこちら</a>。<br><br><code>getStaticProps</code> の戻り値はページコンポーネントの引数（<code>props</code>）として受け取れます。なお、<code>props</code> の型を定義するには下記のように <code>Props</code> 型を定義し、 <code>NextPage</code> 型を拡張します。<br><br><code>index.tsx</code> では各記事へのリンクを表示しましょう。内部リンクには <a href="https://nextjs.org/docs/api-reference/next/link" target="_blank" rel="noopener noreferrer">next/link より import できる Link コンポーネント</a>を使用します。<br></p><pre><code>// index.tsx
// 一部コードは省略しています
// importしている関数と型定義については後述します
import { GetStaticProps } from 'next'
import Link from 'next/link'
import { fetchArticles } from '@/repositories/cms'
import type { Article } from '@/types/cms'
​
type Props = {
&nbsp;articles: Article[]
}
​
export const getStaticProps: GetStaticProps = async ({ params }) =&gt; {
&nbsp;const article = await fetchArticles()
&nbsp;return {
&nbsp;&nbsp;props: articles,
 }
}
​
const Home: NextPage&lt;Props&gt; = ({　articles　}) =&gt; (
 &lt;div className={styles.container}&gt;
&nbsp;&nbsp;&lt;ul&gt;
&nbsp;&nbsp;{articles.map((article) =&gt; (
&nbsp;&nbsp;&nbsp;&nbsp;&lt;li key={article.id}&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;Link href={`/articles/${article.id}`}&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;{article.title}&lt;/p&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/Link&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/li&gt;
&nbsp;&nbsp;))}
&nbsp;&nbsp;&lt;/ul&gt;
&nbsp;&lt;/div&gt;
)
​
export default Home</code></pre><p><br><strong>ダイナミックルート</strong><br>Next.js では<a href="https://nextjs.org/docs/routing/dynamic-routes" target="_blank" rel="noopener noreferrer">ダイナミックルートがサポートされています</a>。ファイル名にブラケットを使用したページを追加することで実現できますので、<code>/pages</code> 以下に <code>articles/[slug].tsx</code> を作成しましょう。<br></p><h4 id="h6150b9a2f5"><strong>GetStaticPaths</strong></h4><p>上記で作成した <code>articles/[slug].tsx</code> で、前述の <code>getStaticProps</code> を使用するには （すなわちダイナミックルートを静的ビルドするには）、それに加えて <code>getStaticPaths</code> という非同期関数を使用する必要があります。<a href="https://nextjs.org/docs/basic-features/data-fetching#getstaticpaths-static-generation" target="_blank" rel="noopener noreferrer">公式ドキュメントはこちら</a>。<br><br><code>getStaticPaths</code>では、生成したいページのパスを配列にした <code>paths</code> プロパティと、ビルドされたページが存在しない場合のフォールバックをどのように行うかを指定する <code>fallback</code> プロパティを、戻り値として必ず指定する必要があります。<br><br>それぞれの値の指定にはいくつかの選択肢がありますが、今回は下記コードの通りに指定しましょう（詳しくは別記事で解説します）。下記のように<code>fallback</code> を <code>false</code> とした場合、その URL（slug）の記事が存在しない場合には、404 ページが表示されます。<br><br>このページで使用する <code>getStaticProps</code> では、slug （記事の ID）を元に API を呼び出すため、引数の <code>context</code> から <code>params</code> プロパティを使用しています。なお、マークアップは一例です。<br></p><pre><code>// index.tsx
// 一部コードは省略しています
// importしている関数と型定義については後述します
import { GetStaticPaths, GetStaticProps, NextPage } from 'next'
import Head from 'next/head'
import { fetchArticles, fetchArticle } from '@/repositories/cms'
import type { Article } from '@/types/cms'
​
type Params = {
&nbsp;slug: string
}
​
type Props = {
&nbsp;article: Article
}
​
export const getStaticPaths: GetStaticPaths = async () =&gt; {
&nbsp;const articles = await fetchArticles()
&nbsp;const paths = articles.map((article) =&gt; `/articles/${article.id}`);
&nbsp;return { 
&nbsp;&nbsp;paths, 
&nbsp;&nbsp;fallback: false
 }
}
​
export const getStaticProps: GetStaticProps = async ({ params }) =&gt; {
&nbsp;const articleId = (params as Params).slug
&nbsp;const article = await fetchArticle(articleId)
​
&nbsp;return {
&nbsp;&nbsp;props: {
&nbsp;&nbsp;&nbsp;article,
  },
 }
}
​
const ArticlePage = ({ article }) =&gt; (
&nbsp;&lt;div className={styles.container}&gt;
&nbsp;&nbsp;&lt;Head&gt;
&nbsp;&nbsp;&nbsp;&lt;title&gt;{article.title}&lt;/title&gt;
&nbsp;&nbsp;&lt;/Head&gt;
&nbsp;&nbsp;&lt;article&gt;
&nbsp;&nbsp;&nbsp;&lt;h1&gt;{article.title}&lt;/h1&gt;
&nbsp;&nbsp;&nbsp;&lt;p&gt;カテゴリ: {article.category}&lt;/p&gt;
&nbsp;&nbsp;&nbsp;&lt;p&gt;作成日時: {article.publishedAt}&lt;/p&gt;
&nbsp;&nbsp;&nbsp;&lt;img
&nbsp;&nbsp;&nbsp;&nbsp;src={article.thumbnail.url}
&nbsp;&nbsp;&nbsp;&nbsp;alt="サムネイル"
&nbsp;&nbsp;&nbsp;&nbsp;width="400"
&nbsp;&nbsp;&nbsp;&nbsp;height="200"
&nbsp;&nbsp;&nbsp;/&gt;
&nbsp;&nbsp;&nbsp;&lt;div dangerouslySetInnerHTML={{ __html: article.text }} /&gt;
&nbsp;&nbsp;&lt;/article&gt;
&nbsp;&lt;/div&gt;
)
​
export default ArticlePage</code></pre><h3 id="h09a94d919d">CMS REST API の呼び出し</h3><p>上記のコード内で利用している、CMS を呼び出す非同期関数については <code>/repositories/cms.ts</code> を作成してエクスポートしています。<br><br>リクエスト処理には <a href="https://developer.mozilla.org/ja/docs/Web/API/Fetch_API" target="_blank" rel="noopener noreferrer">fecth API</a> を利用しています。なお、Next.js では <a href="https://nextjs.org/docs/basic-features/supported-browsers-features" target="_blank" rel="noopener noreferrer">fetch API の polyfill  がデフォルトでサポートされています</a>。<br></p><pre><code>// repositories/cms.ts
import type { Article, Response } from '@/types/cms'
​
const endpoint = '&lt;your-cms-endpoint-url&gt;'
const config = {
&nbsp;headers: {
&nbsp;&nbsp;'X-API-KEY': process.env.CMS_API_KEY,
 },
}
​
export const api = async &lt;T&gt;(url: string): Promise&lt;T&gt; =&gt; {
&nbsp;const response = await fetch(url, config)
&nbsp;if (!response.ok) {
&nbsp;&nbsp;throw new Error(response.statusText)
 }
&nbsp;const json = await response.json()
&nbsp;return json
}
​
export const fetchArticle = async (articleId: string): Promise&lt;Article&gt; =&gt; {
&nbsp;const url = `${endpoint}/${articleId}`
&nbsp;const article = await api&lt;Article&gt;(url)
&nbsp;return article
}
​
export const fetchArticles = async (): Promise&lt;Article[]&gt; =&gt; {
&nbsp;const { contents } = await api&lt;Response&gt;(endpoint)
&nbsp;return contents
}</code></pre><p><br>型定義は <code>/types/cms.d.ts</code> を作成し、エクスポートしています。各オブジェクトのプロパティは CMS の設定・種類（レスポンス）に応じて型を定義しましょう。<br>下記は microCMS を利用し、それぞれ対応するフィールドを設定した場合の型定義です。<br></p><pre><code>// types/cms.d.ts
export type Article = {
&nbsp;id: string
&nbsp;category: string
&nbsp;text: string
&nbsp;title: string
&nbsp;thumbnail: {
&nbsp;&nbsp;url: string
 }
&nbsp;createdAt: string
&nbsp;publishedAt: string
&nbsp;revisedAt: string
&nbsp;updatedAt: string
}
​
export type Response = {
&nbsp;contents: Article[]
&nbsp;limit: number
&nbsp;offset: number
}</code></pre><p><br>ここまでで、CMS コンテンツの取得と表示、ルーティングが完成しました。再度 GitHub にコードをプッシュし、サイトを更新しましょう。例によって、ビルドとデプロイは Vercel が行ってくれます。</p><h2 id="h9be0c3393d">おわりに</h2><p>以上で 0 から Next.js + TypeScript + Headless CMS を利用した静的ブログサイトを作成することができました。<br><br>Next.js と Vercel はフロントエンド最適化のための様々な機能を持ち合わせています。今回は Static Generation に関する基本的な API を中心にコーディングを行いました。<br><br>説明しきれなかった下記の機能については、別記事として公開したいと思います。<br></p><ul><li>ISR（Incremental Static Regeneration）</li><li>next/image</li><li>next/head（OGP 対応）</li><li>Custom Document</li><li>Custom Error Page</li><li>Webhook による Vercel デプロイ（CMS コンテンツ更新時の対応）</li></ul><p><br>最後までご覧いただきありがとうございました。</p>

SHUNKE

Shunke Takami

About

Blog

Portfolio

ShareTune

shunke07.me

Contact