Next.jsの記事一覧
BLOG
microCMSNext.jsTypeScriptWeb制作microCMSがTypeScript型の自動生成に対応。Next.js制作で見直したい型管理とCI
ヘッドレスCMSを使ったWeb制作では、CMS側のAPIスキーマとフロントエンド側の型定義を揃えておく必要があります。例えばmicroCMSで「お知らせ」に項目を追加しても、Next.js側のTypeScriptの型を更新し忘れると、実装と実際のデータ構造にずれが生じます。、microCMSはAPIスキーマからTypeScriptの型を自動生成するCLI「microcms-typegen」を公開しました。同時に、JavaScript SDK（microcms-js-sdk）のバージョン3.6.0では、生成した型を使ってエンドポイントや取得条件に応じた型推論ができるようになりました。これは単に型を書く手間を減らすだけでなく、を考えるきっかけになるアップデートです。この記事では、何が変わったのかを整理したうえで、Next.jsとmicroCMSで企業サイトを制作・保守するときに見直したい型管理とCIのポイントを考えます。Next.jsとmicroCMSを組み合わせる場合、CMSで定義したフィールドに対応する型をフロントエンド側で手書きする方法が一般的でした。例えば、お知らせに「タイトル」「本文」「公開日」がある場合、開発側でもそれらを型定義します。しかし運用開始後に「カテゴリ」や「サムネイル」が追加されると、CMSの設定変更と型定義の修正を別々に行う必要があります。担当者が違ったり、変更が小さかったりすると、この同期が抜けることがあります。型チェックが通っていても、。microcms-typegenは、マネジメントAPIから取得したAPIスキーマをもとにTypeScriptの型を生成します。CMSの設定を見ながらフィールド名を書き写す必要がなくなり、スキーマ変更時もコマンドの再実行で型を更新できます。基本的な導入は、ツールのインストール、初期設定、API情報取得権限を持つAPIキーの設定、型生成の順番です。ただし、公式READMEに記載された動作環境はです。設定ファイルや生成した型を型チェックする場合はが必要で、SDK側の新しい型推論もTypeScript 6.0以降を前提としています。既存プロジェクトへ導入する前に、ランタイムとTypeScriptのバージョンを確認しておきたいところです。microcms-js-sdk 3.6.0では、生成されたサービス全体の型をに指定できます。例えば記事一覧の取得時にで「タイトルだけ」を指定すれば、その条件に応じた戻り値の型が推論されます。による参照先の展開も考慮され、存在しないエンドポイントやフィールドを指定した場合は、静的に分かる範囲で型エラーとして検出できます。これまでのように取得メソッドごとに型を手で指定するより、APIスキーマと実装の関係が明確になります。今回注目したいのは、コマンドです。生成済みの型と現在のAPIスキーマを比較し、差分やファイルの欠落がある場合に終了コード1を返します。生成ファイルを書き換えないため、CIに組み込めます。例えば、次のような運用が考えられます。導入にあたっては、CIからmicroCMSのマネジメントAPIへアクセスするためのAPIキーの管理、チェックを実行するタイミング、開発環境と本番環境でスキーマが異なる場合の扱いなども、あわせて設計する必要があります。Claude CodeなどのAIに実装を任せる場合、AIがCMSに存在しないフィールド名を推測して使ってしまうことがあります。生成した型を参照できる状態にしておけば、存在しないフィールドを使った実装は型チェックで発見しやすくなります。AIに「正しいフィールド名を覚えさせる」だけでなく、という考え方です。ただし、型が正しいからといって画面の仕様や使いやすさまで保証されるわけではありません。AIへの指示、型チェック、テスト、人間による動作確認は、それぞれ役割が異なります。人が確認すべきことと機械で検出できることを分ける、これはブラキオが重視するFrontend Opsの考え方にもつながります。今回の型推論にも対象外があります。公式SDKのREADMEでは、やの文字列内で指定するフィールド名や値は型検査の対象外とされています。また、TypeScriptの型はコンパイル時の確認であり、実際のAPIレスポンスを実行時に検証するものではありません。さらに、既存データには未入力の値が残っている可能性があります。必須フィールドだから必ず値がある、と安易に決めつけないことも大切です。型生成ツールには読み取り型の空値を絞る設定がありますが、実データの状態を保証できる場合に限って使うのがよいでしょう。設定ファイルはES modules形式のTypeScriptが前提で、でを明示しているプロジェクトには対応していない点にも注意が必要です。microCMSの型自動生成は、TypeScriptを書く量を減らすだけの機能ではありません。CMSのスキーマ変更を、フロントエンドの型チェックやCIにつなげられる点に価値があります。Webサイトは公開後も、お知らせの項目追加やページ構成の変更が発生します。そのたびに人間が目視で型を確認するより、方が、継続的な保守には向いていると考えています。導入を検討する際の確認ポイントは次のとおりです。まずは既存プロジェクトのNode.js・TypeScriptのバージョンとCMSの更新フローを確認し、小さなAPIから導入を検討してみるのがよさそうです。ブラキオでは、Next.jsとmicroCMSを使ったサイトの制作だけでなく、公開後の保守・運用もお手伝いしています。「既存サイトに型生成やCIを導入したい」「CMSの更新フローを整理したい」といったご相談も、お気軽にお問い合わせください。※記事内の仕様・バージョンは2026年10月24日時点の公式情報に基づきます。最新の内容は各公式ドキュメントをご確認ください。
2026.10.26
JamstackWeb制作Next.jsmicroCMSの投稿からOGPを取得して画像とリンクカードを作る
Webサイトやブログ記事で外部サイトへのリンクを貼る際、単なるURLだけでは情報が伝わりにくく、ユーザーのクリックを促しにくいことがあります。そこで活用したいのが です。OGPは、Webページの内容をSNSなどで魅力的に表示させるためのメタデータで、これを利用することで、リンクをとして表示できるようになります。この記事では、OGPデータを取得して記事内のリンクを自動的にリッチなリンクカードに変換するJavaScriptコードとその仕組み、そしてその見た目を整えるCSSについて解説します。この記事ではNext.jsのApp routerを使って下記のようなリンクカードを作る方法をご紹介します！OGP（Open Graph Protocol）を使ってブログ記事のリンクをカード形式で表示することには、以下のような効能があります。リンクカードはタイトル・説明・画像がまとまって表示されるため、テキストリンクよりも目立ち、ユーザーの興味を引きやすくなります。画像や説明文があることで、リンク先の内容が直感的に伝わり、クリックされやすくなります。OGP情報が正しく設定されていれば、TwitterやFacebookなどSNSでシェアされた際にも美しいカード形式で表示され、拡散効果が高まります。リンクカードはデザイン的にも整って見えるため、サイト全体の信頼感やプロフェッショナル感がアップします。ブラキオではこのようにヘッドレスCMSから取得した記事をカスタマイズすることも可能今回ご紹介するリンクカードの自動生成は、主に以下の2つのJavaScriptコードと、その見た目を定義するCSSによって実現されます。まず、外部サイトのOGP情報を取得するための関数から見ていきましょう。この関数は、指定されたURLにアクセスし、そのページのHTMLからOGP関連のメタデータを抽出します。次に、実際の記事本文を解析し、OGPデータを利用してリンクカードを生成するReactフックを見ていきましょう。最後に、生成されたリンクカードを美しく表示するためのCSSを見ていきましょう。このCSSは、リンクカード全体のレイアウト、画像（サムネイル）、テキストの表示方法などを定義しています。この記事で紹介したと、そして関連するCSSを組み合わせることで、することができます。これにより、ブログ記事やWebサイトの視認性が向上し、ユーザーが外部サイトのコンテンツを理解しやすくなり、クリック率の向上にも繋がるでしょう。ご自身のサイトにこの機能を組み込んで、より魅力的なコンテンツ表示を実現してみてはいかがでしょうか。
2025.06.14
ReactNext.jsNext.jsにおけるページ内スクロールの実装ガイド
Next.jsを使用したウェブサイトで、ページ内スクロールを実現したいと思ったことはありませんか？例えば、ウェブサイトのナビゲーションバーに「SERVICE」や「ABOUT」のようなリンクがあり、ユーザーがそれらをクリックすると、ページ内の対応するセクションに自動的にスクロールするといった機能です。弊社の上部にあるメニューがこのページ内スクロールを実装しています。よろしければ試してみてくださいね。まずは、実際に試してみて、その振る舞いを体験してみましょう。このような機能を簡単に実装するためには、というライブラリを利用するのがおすすめです。まずは以下のコマンドでインストールしましょう。そして、以下のように呼び出して使用します。ここでのimport文では、という形でエイリアスを設定しています。これは、という名前がNext.jsの と名前が重複してしまい、混乱を避けるためです。そして、メニューリンクからスクロールさせたい要素への移動を設定するために、その要素にのようなIDを指定します。これにより、ページ内スクロールを簡単に実装することが可能となります。以上がNext.jsでのページ内スクロール実装の基本的な手順です。この方法を試して、ウェブサイトのナビゲーション体験をより良いものにしましょう。
2023.05.14
エンジニアリングNext.jsNext.jsでXMLサイトマップを作成する方法
XMLサイトマップというのはXML形式のファイルのこといいます。そのXMLサイトマップを設置することで、新規記事の公開やリライトによる更新情報をインデックスに素早く反映させ、検索結果に表示させることができます。設置したからといって上位表示に直結するわけではありませんが、クローリングが効率的になるということは、結果的にSEO上好ましい状態に近づくということになるでしょう。Next.jsでStatic GenerationをしていわゆるJamstackのサイトを作る際にデプロイ時に一緒にXMLサイトマップ（sitemap.xml）も作る手順をご紹介します。こちらのパッケージを使えば簡単にできてしまいます。設定ファイルを一つと、pacakge.jsonにscriptsを足せばビルド時にサイトマップが生成され流という便利なパッケージです。Next.jsでサイト構築するのならおすすめのパッケージです！！sitemap.config.jsファイルをプロジェクトの直下に作ります。オプションを一つ一つ解説をすると・・・siteUrl：サイトURLを指定します。これは必須項目です。generateRobotsTxt：robots.txt ファイルを生成し、生成されたサイトマップをリストアップします。デフォルトfalseです。outDir：生成するディレクトリを指定します。packge.jsonのscriptsに追記をします。おそらく しているところがあると思うのでその後に を追記します。下記のようにコマンドを叩いていただくとサイトマップの一緒に生成されます。ちなみに、弊社サイトだとこのような形で ディレクトリ内に生成されます。Google Search Consoleへサイトマップを登録します。Google Search Consoleのページに行ったら左メニューのサイトマップをクリックします。次にURLの入力欄があるのでそこにサイトマップのURLを入力してください。サイトのURL/sitemap.xml になるはずです。弊社の場合は です。
2022.03.19