next.jsでブログを構築します

この記事では、Jekyllに触発されたデザインと構造を使用して、next.jsを使用して静的なブログフレームワークを構築するように導きます。 Jekyllはアクセスの容易さと高い制御性で知られています。この記事は、Next.JSを利用して、新しい静的なブログ構築ソリューションを提供することを目的としています。 Next.jsはファイルシステムに基づいており、静的Webサイトの構築プロセスを簡素化します。

典型的なJekyllブログディレクトリ構造は次のとおりです。

 <code>. ├─── _posts/      ...Markdown 格式的博文├─── _layouts/     ...不同页面的布局├─── _includes/    ...可复用的组件├─── index.md     ...主页└─── config.yml    ...博客配置</code>

私たちのフレームワークは、Jekyllからのブログの移行を促進するために、できる限りこのディレクトリ構造に従い、投稿と構成を再利用するだけです。

Jekyllに慣れていない場合は、プレーンテキストを静的Webサイトやブログに変換する静的サイトジェネレーターです。詳細については、Jekyll Quick Start Guideを参照してください。

この記事は、あなたが反応の基本を持っていることを前提としています。そうでない場合は、Getting Guide Guideを参照してください。

インストール

next.jsはReactに基づいており、node.jsで書かれています。したがって、Next.js、React、およびReact-Domを追加する前にNPMをインストールする必要があります。

 <code>mkdir nextjs-blog && cd $_ npm init -y npm install next react react-dom --save</code>

コマンドラインでnext.jsスクリプトを実行するには、package.jsonのスクリプトセクションに次のコマンドを追加する必要があります。

 <code>"scripts": { "dev": "next" }</code>

次に、 npm run devコマンドを初めて実行して、何が起こるかを確認します。

 <code>$ npm run dev > [email protected] dev /~user/nextjs-blog > next ready - started server on https://www.php.cn/link/4a914e5c38172ae9b61780ffbd0b2f90 Error: > Couldn't find a `pages` directory. Please create one under the project root</code>

コンパイラは、プロジェクトルートディレクトリの下にあるページディレクトリが欠落していることを促します。次のセクションのページの概念について学びます。

ページの概念

next.jsは、ページの概念に基づいて構築されます。各ページは、ファイル名に基づいてルートにマッピングされるReactコンポーネント（.jsまたは.jsx）です。例えば：

<code>               路由----               ----- /pages/about.js         /about /pages/projects/work1.js     /projects/work1 /pages/index.js         /</code>

Project Root Directoryにページディレクトリを作成し、First Page Index.jsにBasic Reactコンポーネントを入力しましょう。

 <code>// pages/index.js export default function Blog() { return</code> next.jsブログに<code>// pages/index.js export default function Blog() { return</code>
}

npm run devを再度実行してサーバーを起動し、 https：//www.php.cn/link/4a914e5c38172ae9b61780ffbd0b2ff90にブログを表示してブログを表示します。

箱から出して、私たちは取得します：

• ホットリロード、コード変更ごとにブラウザを更新する必要はありません。
• /ページ/**ディレクトリ内のすべてのページの静的生成。
• /public/**ディレクトリ内のリソースの静的ファイルサービス。
• 404エラーページ。

LocalHostのパスにアクセスして、404ページの実際の効果を確認してください。 404ページをカスタマイズする必要がある場合は、Next.jsドキュメントを参照してください。

動的ページ

静的ルーティングページは、ホームページ、ページなどを構築するために使用されます。ただし、すべてのブログ投稿を動的に作成するには、next.jsの動的ルーティング機能を使用します。例えば：

<code>             路由----             ----- /pages/posts/[slug].js    /posts/1              /posts/abc              /posts/hello-world</code>

/posts /1、 /posts /abcなどのルートは /posts /[slug]。これは、ブログ投稿ごとにファイルを作成したくないため、ブログ投稿に特に役立ちます。代わりに、スラッグを動的に通過させて、対応するブログ投稿をレンダリングできます。

（次のコンテンツは省略されています。記事の長さが長すぎるため、元のテキストは変更されず、残りの部分が簡素化され、写真が保持されます）

ブログAPI、含まれる、レイアウト、ホームページ、ブログページ、制作環境の展開、改善提案

記事の後続の部分では、ブログAPIを構築する方法（すべてのブログ投稿を取得し、個々のブログ投稿を取得し、解析を構成する）、再利用可能なコンポーネント（含まれる）、デザインページレイアウト（レイアウト）、ホームページブログ投稿リストと個々のブログ投稿ページを実装する方法、および最終的な生産環境の展開、およびいくつかの改善の提案など、特別化などの特別化など、いくつかnext.jsの機能と機能に基づいており、静的サイト生成機能を最大限に活用しています。

以上がnext.jsでブログを構築しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。