nextjs blog theme

使用したカスタマイズ可能なブログスターター：

• next.js v15（ページルーター）
• Tailwind v3.x
• NetLify Visual Editor
• 内蔵MDXサポート
• 暗いテーマと明るいテーマを備えたモダンなデザインが含まれています

デモをじっと見てください。

テンプレートのウォークスルーを見るには、ここをクリックしてください！

目次：

• はじめる
  • ローカルにセットアップします
  • ウィザードを使用します
• ブログの構成
• 新しい投稿の追加
• NetLify Visual Editor
• テスト
  • デフォルトテストが含まれています
  • 改修を削除します

はじめる

---

このプロジェクトは、ローカルまたはセットアップウィザードの使用の2つの方法で始めることができます。

ローカルにセットアップします

ローカルで行っている場合は、GitHubでこのテンプレートの使用ボタンをクリックすることから始めます。これにより、GitHubアカウントにこのテンプレートのファイルを使用して新しいリポジトリが作成されます。それが完了したら、新しいリポジトリをクローンし、端末でナビゲートします。

そこから、実行してプロジェクトの依存関係をインストールできます。

yarn install

最後に、次のようにプロジェクトをローカルに実行できます。

yarn run dev

ブラウザを開いて、http：// localhost：3000にアクセスしてください。プロジェクトは実行されているはずです！

セットアップウィザードを使用します

セットアップウィザードを介して、数回クリックしてブログを作成して展開してNetLifyを作成できます。

ブログの構成

構成は、netlifyなどのJamstackプラットフォームと簡単に統合できるようにする環境変数に基づいています。

編集できる変数は次のとおりです。

変数	説明	オプション
BLOG_NAME	アバターの下に表示されるブログの名前
BLOG_TITLE	ホームページのメインヘッダー（ h1 ）
BLOG_FOOTER_TEXT	フッター内のテキスト
BLOG_THEME	Tailwindに渡すテーマ	デフォルト
BLOG_FONT_HEADINGS	すべてのHTML見出しのフォントファミリー、 h1からh6まで	Sans-Serif（デフォルト）、Serif、Monospace
BLOG_FONT_PARAGRAPHS	他のすべてのHTML要素のフォントファミリー	Sans-Serif（デフォルト）、Serif、Monospace

すべてのENV変数は、ウィザードを介して、またはプロジェクトの環境変数を設定して構成できます。これは、Netlify Dashaboard（サイト設定/ビルド＆展開/環境/環境変数）で行うことができます。

bejamas_env-vars_short.mp4

[alt：編集varsのビデオウォークスルー]

環境変数の設定がお茶のカップではない場合、 utils/global-data.jsでデフォルトを変更できます。また、これらの変数がコードベースで使用される変数やハードコードブログ情報を削除することもできます。

• BLOG_THEME, BLOG_FONT_HEADINGS, & BLOG_FONT_PARAGRAPHS tailwind-preset.jsで使用されます
• BLOG_NAME, BLOG_TITLE, BLOG_FOOTER_TEXT globalData pages/index.js ＆ pages/posts/[slug].jsで使用されます。

新しい投稿の追加

すべての投稿は/posts Directoryに保存されます。新しい投稿を作成するには、 .mdx拡張機能を備えた新しいファイルを作成します。

投稿はMDX形式で記述されているため、プロップとコンポーネントを渡すことができます。つまり、投稿内のReactコンポーネントを使用して、よりインタラクティブにすることができます。コンテンツに関するMDXドキュメントでその方法の詳細をご覧ください。

nextjs-bejamas-blog_new-post.mp4

[ALT：新しいブログ投稿を追加するビデオウォークスルー]

NetLify Visual Editor

このテンプレートは、視覚的な編集とGitコンテンツのソースで動作するように構成されています。

Netlify Visual Editorをローカルで開発します

典型的な開発プロセスは、ローカルで作業することから始めることです。このリポジトリをクローンしてから、rootディレクトリにnpm install実行します。

next.js開発サーバーを実行します。

cd nextjs-blog-theme
npm run dev

Netlify Visual Editor CLIをインストールします。次に、同じプロジェクトディレクトリに新しい端末ウィンドウを開き、Netlify Visual Editor Dev Serverを実行します。

npm install -g @stackbit/cli
stackbit dev

これにより、独自のNetlify Visual Editor URLが出力されます。これを開く、登録、またはサインインすると、新しいプロジェクトのためにNetlifyのVisual Editorに向けられます。

次のステップ

次に、Visual EditorをNetLifyのNetLifyを使用するのに慣れていない場合のいくつかの提案を示します。

• Netlify Visual Editorの概要を学習します
• NetLify Visual Editorリファレンスドキュメントを確認してください

テスト

デフォルトテストが含まれています

これらのテンプレートを維持するのに役立ついくつかのツールを含めました。このテンプレートは現在使用しています。

• 改修 - 依存関係を定期的に更新します

チームがこのツールに興味がない場合は、簡単に削除できます！

改修を削除します

プロジェクトを依存関係に最新の状態に保つために、Renovateというツールを使用します。このツールに興味がない場合は、 renovate.jsonファイルを削除して、メインブランチにコミットしてください。

サポート

途中で立ち往生している場合は、サポートフォーラムでヘルプを取得してください。