tailwind nextjs starter blog
v2.3.0
これは次の.js、Tailwind CSSブログスターターテンプレートです。バージョン2は、React Serverコンポーネントを備えた次のアプリディレクトリに基づいており、ContentLayerを使用してマークダウンコンテンツを管理します。
おそらく、最も機能が豊富なNext.JS Markdownブログテンプレートがあります。簡単に構成可能でカスタマイズ可能。既存のJekyllとHugoの個々のブログに代わるものとして完璧です。
開始するには、以下のドキュメントをご覧ください。
問題に直面していますか？ FAQページを確認し、過去の問題について検索を行います。以前に投稿されていない場合は、新しい問題を自由に開くことができます。
機能リクエスト？過去の議論を確認して、以前に育てられたかどうかを確認してください。それ以外の場合は、新しいディスカッションスレッドを自由に開始してください。すべてのアイデアが歓迎されます！
注：これらは、さまざまなフレームワークを使用して、またはコードベースに大幅な変更を加えたコミュニティで提供されたフォークです。公式にはサポートされていません。
Astro Alternative -Tailwind Astroテンプレート。
Remix-Run Alternative- Tailwind Remix-Run Starterブログテンプレート。
Internationalization Support -I18Nとソースコードを備えたテンプレート。
/resumeページ。 （ソースコード）/snippets 、 /booksページ、 ProfileCard 、 CareerTimelineコンポーネントなどを追加します。テンプレートを使用しますか？自由にPRを作成し、このリストにブログを追加してください。
テンプレートへのユーザーと貢献者のコミュニティに感謝します！ここで新しいブログリストを受け入れなくなりました。バージョン1からバージョン2に更新した場合は、このリストからブログを削除して、上記のブログに追加してください。
mdx-embed 、view count、reading分などを追加しました。既存のブログをNextJSとTailwind CSSに移植したかったのですが、使用する箱から簡単なテンプレートはありませんでしたので、作成することにしました。デザインは、TailWindLabsブログから採用されています。
Beautiful-JekyllやHugo Academicのような人気のあるブログテンプレートと同じくらい機能が豊富になりたいと思っていましたが、Reactの最高のエコシステムと現在のWeb開発のベストプラクティスを備えていました。
npx degit ' timlrx/tailwind-nextjs-starter-blog 'siteMetadata.jsをパーソナライズする（サイト関連情報）next.config.jsでコンテンツセキュリティポリシーを変更します。authors/default.md （メイン著者）のパーソナライズprojectsData.tsを変更しますheaderNavLinks.tsを変更して、ナビゲーションリンクをカスタマイズしますyarnWindowsを使用している場合は、実行する必要がある場合があることに注意してください。
$env :PWD = $( Get-Location ) .Pathまず、開発サーバーを実行します。
yarn devhttp：// localhost：3000を開き、ブラウザを使用して結果を確認します。
appのレイアウトまたはdataのコンテンツを編集します。ライブリロードを使用すると、ページは編集するときに自動設定します。
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コードブロックに関連付けられたスタイルを制御します。自由にカスタマイズして、Prismテーマなどの好みのprismjsテーマを使用してください。
contentlayer.config.tsコンテンツソースの定義と使用されるMDXプラグインを含むContentLayerの構成。詳細については、ContentLayerのドキュメントを参照してください。
components/MDXComponents.jsここで指定して、独自のJSXコードを渡すか、コンポーネントを反応します。その後、 .mdxまたは.mdファイルで直接使用できます。デフォルトでは、カスタムリンク、 next/imageコンポーネント、目次コンポーネント、ニュースレターフォームが渡されます。 next.jsの既存の問題を回避するために、コンポーネントをデフォルトエクスポートする必要があることに注意してください。
layouts - ページで使用されるメインテンプレート：
PostLayout 、 PostSimple 、 PostBannerです。 PostLayout 、メタと著者の情報を備えたデフォルトの2列レイアウトです。 PostSimpleは、 PostLayoutの単純化されたバージョンであり、 PostBannerバナー画像を備えています。ListLayout 、検索バーを備えたテンプレートのバージョン1で使用されてListLayoutWithTagsレイアウトは、現在バージョン2で使用されているが、検索バーを省略しているが、タグに関する情報を含むサイドバーが含まれています。 app - ルーティングするページ。詳細については、next.jsドキュメントをお読みください。
next.config.js next.jsに関連する構成他のドメインからスクリプト、画像などをロードする場合は、コンテンツセキュリティポリシーを適応させる必要があります。
コンテンツはContentLayerを使用してモデル化されています。これにより、独自のコンテンツスキーマを定義し、使用して型付けられたコンテンツオブジェクトを生成できます。詳細については、ContentLayerのドキュメントを参照してください。
FrontMatterはHugoの基準に従います。
サポートされているフィールドの最新リストについては、 contentlayer.config.tsを参照してください。次のフィールドがサポートされています。
title (required)
date (required)
tags (optional)
lastmod (optional)
draft (optional)
summary (optional)
images (optional)
authors (optional list which should correspond to the file names in `data/authors`. Uses `default` if none is specified)
layout (optional list which should correspond to the file names in `data/layouts`)
canonicalUrl (optional, canonical url for the post for SEO)
これが投稿のフロントマッターの例です。
---
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
---
pages.ymlワークフローはすでに提供されています。 「githubアクション」を選択するだけで、 Settings > Pages > Build and deployment > Source選択します。
テンプレートを展開する最も簡単な方法は、Vercelに展開することです。詳細については、next.js deploymentドキュメントをご覧ください。
netlifyのnext.jsランタイム構成追加構成を必要とせずに、WebサイトでキーNext.js機能を有効にします。 netlifyは、next.next.js機能を処理するサーバーレス関数を生成しますnext/images
推奨される構成値と詳細については、Netlifyのnext.jsを参照してください。
走る：
$ EXPORT=1 UNOPTIMIZED=1 yarn build次に、 outされたフォルダーを展開するか、 npx serve out 。
重要
https://example.org/myblogのようなURLベースパスで展開する場合は、ビルドコマンドに追加のBASE_PATH shell-varが必要です。
$ EXPORT=1 UNOPTIMIZED=1 BASE_PATH=/myblog yarn build =>コードでは、 ${process.env.BASE_PATH || ''}/robots.txt 、 out buildに"/myblog/robots.txt"を印刷します（またはyarn dev 、ie：on localhost：3000の場合は/robots.txtのみ）
ヒント
代わりに、 UNOPTIMIZED=1とは、 next/imageを使用し続けるために、IMGIX、Cloudinary、またはAkamaiなどの代替画像最適化プロバイダーを使用できます。詳細については、画像最適化のドキュメントを参照してください。
静的ビルドでは使用できない次の機能を削除することを検討してください。
next.config.jsからheaders()をコメントします。apiフォルダーとコンポーネントを削除します。技術的には必要ありませんが、サイトは正常に構築されますが、APIはサーバー側の機能であるため使用できません。 kbar検索をカスタマイズするにはどうすればよいですか？テンプレートを使用しますか？ GitHubでスターを渡したり、独自のブログを共有したり、Twitterで叫んだり、プロジェクトスポンサーになったりすることで、この努力をサポートします。
MIT©Timothy Lin
