Next.jsとKeystoneJSを使用してReact主導のブログを構築する

KeystoneJSは、すべてのNode.js CMSフレームワークの中で最良の選択肢の1つです。独自のジェネレーターコマンドラインツールを使用して、すべてのモデル生成、データベース接続を処理し、自動生成された管理インターフェイスを提供します。また、高度にカスタマイズ可能であるため、ニーズに合わせて独自のモデルを作成できます。ただし、フロントエンドでは独自のテンプレートエンジンを使用し、Reactはこのフレームワークに組み込まれていません。

Next.jsは、人気のあるReact SSR(サーバーサイドレンダリング)フレームワークであり、最小限の構成でSEOに優しいReact Webサイトを構築できます。サーバー側のレンダリングを使用すると、クライアントに戻る前にサーバーにSEOメタタグを設定できます。そのため、検索エンジンはJavascriptを実行せずにデータをクロールできます。これは、ブログやニュースWebサイトにとって特に重要です。

このチュートリアルでは、両方のフレームワークの長所を活用し、それらを統合して、完全に機能するブログ/ニュースWebサイトを構築します。

前提条件:

  • ノードとnpmがインストールされています

KeystoneJSをインストールする

最初にmongoDBをインストールして実行します。私はMacを使用しているため、Homebrewでインストールする例を次に示します。

mongodbをインストールする
醸造サービスはmongodbを開始します

次に、プロジェクトルートで、YeomanジェネレーターでKeystoneJSをインストールします

npm install yo -g
npm install -g generator-keystone
よキーストーン

KeystoneJSのセットアップ手順の例を次に示します。

KeystoneJSのすべてのフロントエンドコンポーネントを後で削除するため、テンプレートエンジンとCSSプリプロセッサの選択は重要ではありません。

次に、プロジェクトルートにこのようなフォルダー構造が表示されます。

で実行してみてください

ノードキーストーン

キーストーンランディングがlocalhost:3000に表示され、キーストーンアプリがセットアップされます。

KeystoneJSのフロントエンドコンポーネントを削除し、Next.jsをプラグインします

React、Next.jsおよびaxios(ネットワーク要求用)をインストールします。

npm install next react react-dom axios --save

次に、プロジェクトルートで、フォルダーテンプレートとパブリックおよびその中のファイルを削除します。

フォルダページ、コンポーネント、静的に置き換えて、Next.jsおよびReactファイルを含めます。

これで、フォルダ構造は次のようになります。

次に、keystone.jsで、Next.jsアプリオブジェクトを初期化します。

そして、Keystone.js構成をNext.jsアプリ準備ブロック内にラップします。

後でNext.jsでルートを設定できるように、Next.jsアプリをルートに渡す必要があります。

keystone.set( 'routes'、require( './ routes')(app));

KeystoneJSフロントエンドコードを削除すると、keystone.jsは次のようになります。

次に、routesフォルダーで、viewsフォルダーとmiddleware.jsを削除します。これらのファイルは使用しないためです。私たちはroutesフォルダにindex.jsのみを保持しています。

routes / index.jsに、設定の例を示します。 KeystoneJSから投稿を取得するための/ api / postsエンドポイントがあり、残りのルートはNext.jsによって処理されます。

keystone.jsとroutes / index.jsを設定したら、ノードkeystoneを再度実行してみてください。

KeystoneJSページの代わりに、Next.js 404ページが表示されます。

Next.jsでページを作成してみましょう。

ページフォルダーで、新しいファイルindex.jsを作成します。

そして、ノードkeystoneを再度実行します。

Hello worldが表示され、Next.jsがKeystoneJSで正常にプラグインされます。

Next.jsフロントエンドの実装

最初に管理パネルhttp:// localhost:3000 / keystoneにログインし、表示するデータがあるようにいくつかの投稿を行います。

次に、ページフォルダーで、新しいファイル_document.jsを作成します。ここで、Bootstrapまたは他のサードパーティのフロントエンドライブラリをインポートできます。

pages / index.jsで。 Next.jsメソッドgetInitialProps()で投稿を取得し、小道具として返すことができます。その後、データを使用して、Reactで投稿をレンダリングできます。

これで、localhost:3000に投稿が表示されます!

KeystoneJSとNext.jsを統合し、簡単なブログを作成しました。これら2つのフレームワークはどちらも洗練されているため、これらを使用してより複雑なWebサイトを構築できます。

サンプルプロジェクト全体はgithubでホストされています。

https://github.com/victor36max/keystone-next-example