Tailwind Nextjs Starter Blog v2.0 リリース

はじめに

Tailwind Nextjs Starter Blog テンプレート v2.0 のリリースへようこそ。今回のリリースは、Nextjs App directory と React Server Components をサポートするためのコードベースの大規模なリファクタリングです。新機能と V1 からの移行方法についてお読みください。

V1 から V2 へ
Next.js App Directory と React Server Components
TypeScript ファースト
Contentlayer
Pliny
新しい検索コンポーネント
- Algolia
- Kbar
スタイリングとレイアウトの更新
- テーマ
- 新しいレイアウト
移行の推奨事項
まとめ
サポート
ライセンス

V1 から V2 へ

Github Traffic

このテンプレートは 2021 年 1 月に初めてリリースされ、以来数千人のユーザーに利用されてきました。Next.js Templates、Tailwind Awesome をはじめとするリスティングサイトに掲載されています。毎日 200 人以上のユニークビジターを集め、1500〜2000 ページビューを記録し、1.3k のフォークとその他多数のクローンがあります。

このテンプレートを成功に導いてくださったユーザーとコントリビューターのコミュニティに感謝します！readme のリストを整理しながら、テンプレートを使用して作成されたブログの多様性を紹介し、このマイルストーンを祝うために、小さなビデオモンタージュを作成しました：

バージョン 2 は前バージョンの成功を基盤に、多くの新機能と改善を導入しています。コードベースは Next.js App directory と React Server Components をサポートするようにリファクタリングされました。Markdown / MDX は Contentlayer を使用して処理されるようになりました。Contentlayer は型安全なコンテンツ SDK で、コンテンツを検証して型安全な JSON データに変換し、アプリケーションに簡単にインポートできます。Pliny という新しいライブラリと統合されており、アナリティクス、コメント、ニュースレター購読で静的サイトを強化するための Next.js コンポーネントをすぐに使える形で提供します。新しいコマンドパレット（Cmd-k）検索コンポーネントもテンプレートに追加されました。

V2 の新機能と改善点を詳しく見ていきましょう。

Next.js App Directory と React Server Components

Next.js App router がついに安定版となり、Page Router とほぼ機能互換になったため、コードベースを新しいセットアップに移行しました。これにより、ハイブリッドレンダリングアプローチが可能になり、サーバーサイドで生成される React Server Components によってページの読み込みが速くなりバンドルサイズが小さくなる一方で、インタラクティブ性のためにクライアントサイドの React コンポーネントを追加する能力も維持しています。¹

追加の機能には新しいパラダイムの学習が伴います。新機能をできるだけ活用するようにコードベースを移行しました。これには、フォルダー構造の変更、コンポーネントのサーバーコンポーネントとクライアントコンポーネントへの分割、サーバーサイドデータフェッチの活用、SEO の発見性のための推奨 Metadata API の使用が含まれます。

これによりコードベースはある程度簡素化されますが、旧コードベースからの移行はより困難になります。移行を検討している場合は、新しいテンプレートから始めて、カスタマイズと既存コンテンツをコピーすることをお勧めします。詳細は移行の推奨事項セクションを参照してください。

TypeScript ファースト

コードベースは TypeScript に移行されました。以前のバージョンのテンプレートは Javascript と Typescript の両方で利用可能でしたが、メンテナンスの負担を軽減するために Typescript に集中することにしました。これにより、IDE でのより良い型チェックとコード補完も可能になります。

Typescript は新しい型安全なマークダウンプロセッサー Contentlayer とも完璧にマッチします。

Contentlayer

Contentlayer は、コンテンツを検証して型安全な JSON データに変換し、アプリケーションに簡単にインポートできるコンテンツ SDK です。ローカルのマークダウンや MDX ファイルの操作を快適にします。これは MDX-bundler と独自のマークダウン処理ワークフローを置き換えるものです。

まず、コンテンツソースを定義します。ドキュメントタイプの名前、ソースの場所、フロントマターフィールド、およびプロセスの一部として生成される追加の計算フィールドを指定します。

contentlayer.config.ts

export const Blog = defineDocumentType(() => ({
  name: 'Blog',
  filePathPattern: 'blog/**/*.mdx',
  contentType: 'mdx',
  fields: {
    title: { type: 'string', required: true },
    date: { type: 'date', required: true },
    tags: { type: 'list', of: { type: 'string' }, default: [] },
    ...
  },
  computedFields: {
    readingTime: { type: 'json', resolve: (doc) => readingTime(doc.body.raw) },
    slug: {
      type: 'string',
      resolve: (doc) => doc._raw.flattenedPath.replace(/^.+?(\/)/, ''),
    }
    ...
  },
}))

Contentlayer は MDX ファイルを目的の markdown remark または rehype プラグインで処理し、スキーマを検証し、型定義を生成し、ページに簡単にインポートできる json ファイルを出力します。ホットリロードはすぐに使えるので、マークダウンファイルの編集はブラウザに即座に反映されます！

Pliny

テンプレートの人気の大きな理由は、アナリティクスプロバイダーからコメントソリューションまで、他のサービスとのカスタマイズ性と統合性でした。しかし、これはユーザーがその機能を使用しない場合でも、多くのボイラープレートコードをテンプレート内に配置する必要があることを意味します。アップデートやバグ修正はユーザーのコードベースに手動でコピーする必要がありました。

これを解決するために、ロジックを別のリポジトリに抽象化しました - Pliny。Pliny は静的サイトを強化するためのすぐに使える Next.js コンポーネントを提供します：

アナリティクス
- Google Analytics
- Plausible Analytics
- Simple Analytics
- Umami Analytics
- Posthog
コメント
- Disqus
- Giscus
- Utterances
ニュースレター（Next 13 API Routes を使用）
- Buttondown
- Convertkit
- Email Octopus
- Klaviyo
- Mailchimp
- Revue
Tailwind スタイルシート付きコマンドパレット検索
- Algolia
- Kbar（ローカル検索）
UI ユーティリティコンポーネント
- Bleed
- Newsletter / Blog Newsletter
- Pre / Code block
- Table of Contents

siteMetadata.js を変更して適切なフィールドを変更することで、お好みのサービスを選択できます。例えば、Umami Analytics から Plausible に変更するには、以下のフィールドを変更します：

siteMetadata.js

analytics: {
-   umamiAnalytics: {
-     // We use an env variable for this site to avoid other users cloning our analytics ID
-     umamiWebsiteId: process.env.NEXT_UMAMI_ID, // e.g. 123e4567-e89b-12d3-a456-426614174000
-   },
+    plausibleAnalytics: {
+      plausibleDataDomain: '', // e.g. tailwind-nextjs-starter-blog.vercel.app
+    },
},

設定ファイルの変更は自動的にコンポーネントに反映されます。テンプレートの変更は不要です。

内部的には、Pliny は <Analytics analyticsConfig={analyticsConfig}/> や <Comments commentsConfig={commentsConfig}/> などの高レベルコンポーネントをエクスポートし、設定オブジェクトを受け取って適切なコンポーネントをレンダリングします。レイアウトはサーバーサイドで定義されているため、Next.js は設定オブジェクトを使用してレンダリングするコンポーネントを決定し、必要なコンポーネントバンドルのみをクライアントに送信できます。

新しい検索コンポーネント

2023 年にコマンドパレット検索バーのないブログなんて？

最もリクエストの多かった機能の 1 つが追加されました！検索コンポーネントは Algolia と Kbar ローカル検索の 2 つの検索プロバイダーをサポートしています。

Algolia

Algolia Docsearch は、多くのドキュメントサイトで使用されている人気の無料サービスです。インデックス作成のために送信されたウェブサイトを自動的にスクレイピングし、美しいダイアログモーダルで検索結果を利用可能にします。Pliny コンポーネントは Docusaurus の実装に大きくインスパイアされており、Tailwind CSS テーマと互換性のあるスタイルシートが付属しています。

Kbar

Kbar は、高速でポータブル、拡張可能な cmd+k インターフェースです。Pliny の実装では kbar を使用してローカル検索ダイアログボックスを作成します。コンポーネントは、Contentlayer のビルドプロセスで作成されたデフォルトの search.json JSON ファイルを読み込みます。Cmd-k または ctrl-k を押して検索バーの動作を確認してみてください！

スタイリングとレイアウトの更新

テーマ

tailwind.config.js は、可能な限り Tailwind Typography のデフォルトを使用し、prose-invert クラスによるダークモードの組み込みサポートを使用するように更新されました。これは以前の prose-dark クラスと設定を置き換えます。

プライマリーテーマカラーは teal から pink に、プライマリーグレーテーマは neutral から gray に更新されました。

Inter は Space Grotesk にデフォルトフォントとして置き換えられました。

新しいレイアウト

layouts ディレクトリで利用可能なレイアウトコンポーネントは、ブログの外観をカスタマイズする簡単な方法を提供します。²

人気テンプレートを作ることの欠点は、あちこちで似たようなサイトを見かけるようになることです。ユーザーは好みに合わせてレイアウトをカスタマイズすることが推奨されていますが、簡単に切り替え可能なレイアウトオプションが増えることで多様性が促進され、さらなるカスタマイズの良い出発点になるかもしれません。

v2 では、新しい記事レイアウト PostBanner を追加しました。大きなバナー画像と中央揃えのコンテンツコンテナが特徴です。新しいレイアウトを使用するように更新された「Pictures of Canada」ブログ記事をご覧ください。

デフォルトのブログ一覧レイアウトも、ブログタグ付きのサイドバーを含むように更新されました。以前のレイアウトの検索バーは新しいコマンドパレット検索に置き換えられました。古いレイアウトに戻すには、ListLayoutWithTags コンポーネントを使用しているページを元の ListLayout に変更するだけです。

移行の推奨事項

ディレクトリ構造、セットアップ、ツールの大幅な変更により、新しいテンプレートから始めて既存コンテンツをコピーし、段階的に変更を新しいテンプレートに移行することをお勧めします。

スタイルの変更は比較的軽微であり、旧 tailwind.config.js から新しいものにコピーできます。コピーする場合、Tailwind Typography スタイリングを使用するコンポーネントに prose-dark クラスを追加し直す必要があるかもしれません。ルートレイアウトコンポーネントのフォントインポートを目的のフォントに変更してください。

MDX 処理パイプラインとスキーマの変更は、新しい Contentlayer セットアップに簡単に移植できます。フロントマターフィールドに変更がある場合は、contentlayer.config.ts のドキュメントタイプを変更して新しいフィールドを含めることができます。カスタムプラグインは contentlayer.config.ts の makeSource エクスポートの remarkPlugins と rehypePlugins プロパティに追加できます。

マークダウンレイアウトは layouts ディレクトリから自動的にソースされなくなりました。代わりに、blog/[...slug]/page.tsx で定義された layouts オブジェクトで指定する必要があります。³

より大きなコンポーネントやページを移植するには、まず "use client" ディレクティブを使用してクライアントコンポーネントとして指定することをお勧めします。正しくレンダリングされたら、インタラクティブなコンポーネント（use フックに依存する部分）をクライアントコンポーネントとして分割し、残りのコードをサーバーコンポーネントとして保持できます。詳細は Next.js の包括的な移行ガイドを参照してください。

まとめ

V2 の新機能と改善を楽しんでいただければ幸いです。フィードバックやご提案がありましたら、Issue を作成するか、Twitter でお気軽にご連絡ください。

サポート

テンプレートを使用していますか？GitHub でスターを付けたり、ブログを共有したり、Twitter でシャウトアウトしたり、プロジェクトのスポンサーになることでこの活動を支援してください。

ライセンス

以前のバージョンは本番ビルドに Preact を注入していました。しかし、React Server Components をサポートしていないため、これは不可能になりました。全体的なバンドルサイズは約 85kB に増加しましたが、コンテンツの大部分はサーバーサイドで事前レンダリングできるため、First Contentful Paint と Time to Interactive は低く抑えられています。React を全体的に使用することで、外部ライブラリやコンポーネントとのより一貫した動作も実現できます。 ↩
これは Next.js App Directory のレイアウトとは異なり、再利用可能な React コンテナと考えるのが最適です。 ↩
これは Server Components を活用して、マークダウンファイルで選択したレイアウトを簡単に指定し、layouts オブジェクトとマッチングして適切なレイアウトコンポーネントをレンダリングします。 ↩