Tailwind Nextjs Starter Blog

これは Next.js と Tailwind CSS を使ったブログスターターテンプレートです。おそらく最も機能が豊富な Next.js マークダウンブログテンプレートでしょう。最新技術で構成済みで、技術記事の執筆を快適にします。設定やカスタマイズも簡単です。既存の Jekyll や Hugo の個人ブログの置き換えに最適です。

以下のドキュメントを参考にして始めましょう。

問題が発生しましたか？FAQ ページを確認し、過去の Issue を検索してください。該当するものがなければ、新しい Issue を自由に作成してください。

機能リクエストがありますか？過去のディスカッションで既に提案されていないか確認してください。なければ、新しいディスカッションスレッドを自由に立ち上げてください。すべてのアイデアを歓迎します！

使用例

• デモブログ - このリポジトリ
• 私の個人ブログ - 日付付きブログ記事を自動生成するように改造
• Aloisdg のクックブック - 写真とレシピ付き！
• GautierArcin の next translate デモ - mdx 記事の翻訳を含む、ソースコード
• David Levai のデジタルガーデン - カスタムデザインとメール購読機能を追加
• Thinh's Corner - スティッキーサイド目次付きのカスタムレイアウト

テンプレートを使用していますか？PR を作成して、あなたのブログをこのリストに追加してください。

動機

既存のブログを Nextjs と Tailwind CSS に移行したかったのですが、すぐに使えるテンプレートがなかったので自分で作ることにしました。デザインは Tailwindlabs blog から取り入れています。

beautiful-jekyll や Hugo Academic のような人気ブログテンプレートと同等の機能を持ちつつ、React エコシステムと最新のウェブ開発のベストプラクティスを活かしたものにしたいと考えていました。

機能

• Tailwind 3.0 とプライマリーカラー属性による簡単なスタイルカスタマイズ
• ほぼ完璧な Lighthouse スコア - Lighthouse レポート
• 軽量、初回ロード JS 45kB、本番ビルドで Preact を使用
• モバイルフレンドリーな表示
• ライトテーマとダークテーマ
• Fontsource によるセルフホストフォント
• plausible、simple analytics、Google Analytics に対応
• MDX - マークダウン文書で JSX を記述！
• rehype-prism-plus による行番号・行ハイライト付きサーバーサイドシンタックスハイライト
• KaTeX による数式表示サポート
• rehype-citation による引用・参考文献サポート
• next/image による自動画像最適化
• mdx-bundler による柔軟なデータ取得
• タグサポート - 各ユニークタグに専用ページを生成
• 複数著者サポート
• ブログテンプレート
• TOC コンポーネント
• ブログ記事のネストルーティングサポート
• mailchimp、buttondown、convertkit に対応したニュースレターコンポーネント
• giscus、utterances、disqus に対応
• プロジェクトページ
• セキュリティヘッダー設定済み
• RSS フィード、サイトマップなど SEO フレンドリー！

サンプル記事

• マークダウンガイド
• Next.js の画像について詳しく学ぶ
• 数式組版ツアー
• シンプルな MDX 画像グリッド
• 長文の例
• ネストルート記事の例

クイックスタートガイド

1. JS（公式サポート）- npx degit https://github.com/timlrx/tailwind-nextjs-starter-blog.git または TS（コミュニティサポート）- npx degit timlrx/tailwind-nextjs-starter-blog#typescript
2. siteMetadata.js をカスタマイズ（サイト関連情報）
3. giscus 以外のアナリティクスプロバイダーやコメントソリューションを使用する場合は next.config.js のコンテンツセキュリティポリシーを変更
4. authors/default.md をカスタマイズ（メイン著者）
5. projectsData.js を変更
6. headerNavLinks.js を変更してナビゲーションリンクをカスタマイズ
7. ブログ記事を追加
8. Vercel にデプロイ

開発

まず、開発サーバーを起動します：

npm start
# or
npm run dev

ブラウザで http://localhost:3000 を開いて結果を確認してください。

pages/index.js を編集してページの変更を始められます。ファイルを編集するとページが自動更新されます。

拡張 / カスタマイズ

data/siteMetadata.js - ユーザーの要件に合わせて変更すべきサイト関連情報の大部分を含みます。

data/authors/default.md - デフォルトの著者情報（必須）。追加の著者は data/authors にファイルとして追加できます。

data/projectsData.js - プロジェクトページのスタイル付きカードを生成するためのデータ。

data/headerNavLinks.js - ナビゲーションリンク。

data/logo.svg - 独自のロゴに置き換えてください。

data/blog - 独自のブログ記事に置き換えてください。

public/static - 画像やファビコンなどのアセットを格納します。

tailwind.config.js と css/tailwind.css - サイト全体の外観を変更できる Tailwind スタイルシートを含みます。

css/prism.css - コードブロックのスタイルを制御します。自由にカスタマイズして、お好みの prismjs テーマ（例：prism themes）を使用してください。

components/social-icons - 他のアイコンを追加するには、Simple Icons から SVG ファイルをコピーして index.js にマッピングするだけです。その他のアイコンは heroicons を使用しています。

components/MDXComponents.js - ここで独自の JSX コードや React コンポーネントを指定できます。.mdx や .md ファイルから直接呼び出すことができます。デフォルトでは、カスタムリンクと画像コンポーネントが渡されています。

layouts - ページで使用されるメインテンプレート。

pages - ルーティング先のページ。詳細は Next.js ドキュメントを参照してください。

next.config.js - Next.js 関連の設定。他のドメインからスクリプトや画像などを読み込む場合は、コンテンツセキュリティポリシーを適宜変更する必要があります。

記事

フロントマター

フロントマターは Hugo の標準に準拠しています。

現在 10 個のフィールドがサポートされています。

title (必須)
date (必須)
tags (必須、空の配列も可)
lastmod (任意)
draft (任意)
summary (任意)
images (任意、指定なしの場合は siteMetadata 設定の socialBanner がデフォルト)
authors (任意のリスト、`data/authors` 内のファイル名に対応。指定なしの場合は `default` を使用)
layout (任意のリスト、`data/layouts` 内のファイル名に対応)
canonicalUrl (任意、SEO 用の記事の正規 URL)

以下は記事のフロントマターの例です：

---
title: 'Introducing Tailwind Nexjs Starter Blog'
date: '2021-01-12'
lastmod: '2021-01-18'
tags: ['next-js', 'tailwind', 'guide']
draft: false
summary: 'Looking for a performant, out of the box template, with all the best in web technology to support your blogging needs? Checkout the Tailwind Nextjs Starter Blog template.'
images: ['/static/images/canada/mountains.jpg', '/static/images/canada/toronto.jpg']
authors: ['default', 'sparrowhawk']
layout: PostLayout
canonicalUrl: https://tailwind-nextjs-starter-blog.vercel.app/blog/introducing-tailwind-nextjs-starter-blog
---

記事の作成

node ./scripts/compose.js を実行して新しい記事をブートストラップします。

対話型プロンプトに従って、フロントマターが事前入力された記事を生成します。

デプロイ

Vercel テンプレートをデプロイする最も簡単な方法は、Next.js の開発元である Vercel Platform を使用することです。詳細は Next.js デプロイメントドキュメントを確認してください。

Netlify / GitHub Pages / Firebase など テンプレートは画像最適化に next/image を使用しているため、Netlify や GitHub Pages などの他の人気静的ホスティングサイトにデプロイするには追加設定が必要です。Imgix、Cloudinary、Akamai などの代替画像最適化プロバイダーを使用する必要があります。あるいは、next/image コンポーネントを標準の img タグに置き換えてください。詳細は next/image ドキュメントを参照してください。

ニュースレターコンポーネントで使用している API ルートは、静的サイトエクスポートでは使用できません。フォーム API エンドポイントプロバイダーを使用し、ニュースレターコンポーネントのルートを適宜置き換える必要があります。Netlify などの他のホスティングプラットフォームも代替ソリューションを提供しています。詳細はそれぞれのドキュメントを参照してください。

サポート

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

ライセンス

MIT © Timothy Lin