NextとMDXでブログを構築する方法

公開: 2022-03-10
クイックサマリー↬このガイドでは、優れた開発者エクスペリエンスを提供し、本番環境に必要なすべての機能を備えた、人気のあるReactフレームワークであるNext.jsについて説明します。 また、Next.jsとMDXを使用して、段階的にブログを作成します。 最後に、「バニラ」ReactやGatsbyなどの代替手段の代わりにNext.jsを選択する理由について説明します。

Next.jsは、静的および動的なアプリをすばやく構築できるようにするReactフレームワークです。 本番環境に対応しており、サーバー側のレンダリングと静的サイトの生成をすぐにサポートするため、Next.jsアプリは高速でSEOに適しています。

このチュートリアルでは、最初にNext.jsとは何か、そしてCreate ReactAppやGatsbyの代わりにNext.jsを使用する理由について説明します。 次に、Next.jsとMDXを使用して投稿を記述およびレンダリングできるブログを作成する方法を紹介します。

開始するには、Reactの経験が必要です。 Next.jsの知識は便利ですが、必須ではありません。 このチュートリアルは、Next.jsを使用してブログ（個人または組織）を作成したい、またはまだ何を使用するかを探している人に役立ちます。

飛び込みましょう。

Next.jsとは何ですか？

Next.jsは、Vercelによって作成および保守されているReactフレームワークです。 React、Node.js、Babel、Webpackで構築されています。 通常は「バニラ」Reactアプリでセットアップされる多くの優れた機能が付属しているため、本番環境に対応しています。

Next.jsフレームワークは、サーバー上でアプリをレンダリングしたり、静的にエクスポートしたりできます。 コンテンツを表示するためにブラウザがJavaScriptをロードするのを待たないため、Next.jsアプリはSEOに対応し、非常に高速になります。

なぜReactアプリの作成よりもNext.jsを使用するのですか？

Create React Appは、構成なしで、WebpackやBabelなどをセットアップしたり、依存関係を維持したりする手間をかけずに、最新のビルドセットアップを提供する便利なツールです。 これは、最近Reactアプリを作成するための推奨される方法です。 TypeScript用のテンプレートがあり、React TestingLibraryも付属しています。

ただし、複数ページのアプリを作成する場合は、サーバーでReactアプリをレンダリングする場合と同様に、追加のライブラリをインストールする必要があります。 余分なセットアップが問題になる可能性があり、インストールされたパッケージがアプリの最終的なバンドルサイズを増やす可能性があります。

これはまさにNext.jsが解決しようとしている問題です。 制作に必要なすべてのものを備えた、最高の開発者エクスペリエンスを提供します。 それはいくつかのクールな機能が付属しています：

  • 静的エクスポート（事前レンダリング）
    Next.jsを使用すると、ビルド時にNext.jsアプリをサーバーなしで実行される静的HTMLにエクスポートできます。 これは、各リクエストではなくビルド時に実行されるため、Webサイトを生成するための推奨される方法です。
  • サーバー側のレンダリング（事前レンダリング）
    リクエストごとに、サーバー上のHTMLにページを事前にレンダリングします。
  • 自動コード分割
    Reactとは異なり、Next.jsはコードを自動的に分割し、必要なJavaScriptのみをロードするため、アプリが高速になります。
  • ファイルシステムベースのルーティング
    Next.jsはファイルシステムを使用してアプリでルーティングを有効にします。つまり、 pagesディレクトリの下にあるすべてのファイルが自動的にルートとして扱われます。
  • コードのホットリロード
    Next.jsは、React Fast Refreshを使用してコードをホットリロードし、優れた開発者エクスペリエンスを提供します。
  • スタイリングオプション
    Next.jsフレームワークには、Styled JSX、CSSモジュール、Sass、LESSなどのサポートが組み込まれています。

Next.jsとGatsby

Gatsbyは、ReactとGraphQLの上に構築された静的サイトジェネレーターです。 人気があり、テーマ、プラグイン、レシピなどを提供する巨大なエコシステムがあります。

GatsbyとNext.jsのWebサイトは、どちらもサーバー上または静的にレンダリングされるため、超高速です。つまり、JavaScriptコードはブラウザーのロードを待機しません。 開発者の経験に応じてそれらを比較してみましょう。

Gatsbyは、特にReactをすでに知っている場合は、簡単に始めることができます。 ただし、GatsbyはGraphQLを使用してローカルデータとページをクエリします。 GraphQLには学習曲線があり、静的ページのクエリとビルド時間は少し長くなるため、Gatsbyを使用してこの単純なブログを構築するのはやり過ぎかもしれません。 この同じブログを最初にGatsbyで、次にNext.jsで2回作成した場合、Next.jsで作成したブログは、通常のJavaScriptを使用してローカルデータとページをクエリするため、作成時にはるかに高速になります。

Next.jsフレームワークのパワーを活用して、他のフレームワークよりもはるかに便利な理由を理解していただければ幸いです。 また、Googleロボットがアプリを高速かつ簡単にクロールできるため、ウェブサイトがSEOに大きく依存している場合にも最適です。 これが、この記事でNext.jsを使用してMDXライブラリを使用してブログを作成する理由です。

新しいNext.jsアプリを設定することから始めましょう。

ジャンプした後もっと！ 以下を読み続けてください↓

セットアップ

Next.jsアプリを作成する方法は2つあります。 新しいアプリを手動で設定するか、[次のアプリを作成]を使用できます。 後者をお勧めします。これが推奨される方法であり、すべてが自動的に設定されます。

新しいアプリを起動するには、コマンドラインインターフェイス（CLI）で次のコマンドを実行します。

 npx create-next-app

プロジェクトが初期化されたら、Next.jsアプリを次のように構成しましょう。

 src ├── components | ├── BlogPost.js | ├── Header.js | ├── HeadPost.js | ├── Layout.js | └── Post.js ├── pages | ├── blog | | ├── post-1 | | | └── index.mdx | | ├── post-2 | | | └── index.mdx | | └── post-3 | | └── index.mdx | ├── index.js | └── \_app.js ├── getAllPosts.js ├── next.config.js ├── package.json ├── README.md └── yarn.lock

ご覧のとおり、私たちのプロジェクトは単純なファイル構造を持っています。 注意すべき点が3つあります。

  • _app.jsを使用すると、 App.jsコンポーネントにコンテンツを追加して、グローバルにすることができます。
  • getAllPosts.jsは、フォルダーpages/blogからブログ投稿を取得するのに役立ちます。 ちなみに、ファイルには好きな名前を付けることができます。
  • next.config.jsは、Next.jsアプリの構成ファイルです。

後で各ファイルに戻って、その機能について説明します。 とりあえず、MDXパッケージを見てみましょう。

MDXライブラリのインストール

MDXは、JSXをシームレスに記述し、コンポーネントをMarkdownファイルにインポートできる形式です。 これにより、通常のMarkdownを記述し、Reactコンポーネントをファイルに埋め込むこともできます。

アプリでMDXを有効にするには、 @mdx-js/loaderライブラリをインストールする必要があります。 そのためには、最初にプロジェクトのルートに移動してから、CLIで次のコマンドを実行します。

 yarn add @mdx-js/loader

または、npmを使用している場合：

 npm install @mdx-js/loader

次に、Next.jsに固有のライブラリである@next/mdxをインストールします。 CLIで次のコマンドを実行します。

 yarn add @next/mdx

または、npmの場合：

 npm install @next/mdx

すごい！ セットアップは完了です。 手を汚して、意味のあるコードを書いてみましょう。

next.config.jsファイルの構成

const withMDX = require("@next/mdx")({ extension: /\.mdx?$/ }); module.exports = withMDX({ pageExtensions: ["js", "jsx", "md", "mdx"] });

このチュートリアルの前半で、 pagesフォルダーの下のファイルは、ビルド時にNext.jsによってページ/ルートとして扱われると述べました。 デフォルトでは、Next.jsは拡張子が.jsまたは.jsxのファイルを選択するだけです。 そのため、Next.jsのデフォルトの動作にいくつかのカスタマイズを追加するために、構成ファイルが必要です。

next.config.jsファイルは、記事を含むblogフォルダーがpagesディレクトリにあるため、拡張子が.mdまたは.mdxのファイルもビルド時にページ/ルートとして扱われるようにフレームワークに指示します。

そうは言っても、次のパートでブログ投稿の取得を開始できます。

ブログ投稿の取得

Next.jsを使用してブログを作成するのが簡単でシンプルな理由の1つは、ローカル投稿をフェッチするためにGraphQLなどを必要としないことです。 通常のJavaScriptを使用してデータを取得できます。

getAllPosts.js ：

 function importAll(r) { return r.keys().map((fileName) => ({ link: fileName.substr(1).replace(/\/index\.mdx$/, ""), module: r(fileName) })); } export const posts = importAll( require.context("./pages/blog/", true, /\.mdx$/) );

このファイルは、最初は威圧的かもしれません。 これは、すべてのMDXファイルをフォルダーpages/blogからインポートする関数であり、投稿ごとに、ファイルのパス（拡張子（ /post-1 ）なし）とブログ投稿のデータを含むオブジェクトを返します。

これで、Next.jsアプリでデータのスタイルを設定して表示するためのコンポーネントを作成できます。

コンポーネントの構築

components/Layout.js ：

 import Head from "next/head"; import Header from "./Header"; export default function Layout({ children, pageTitle, description }) { return ( <> <Head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta charSet="utf-8" /> <meta name="Description" content={description}></meta> <title>{pageTitle}</title> </Head> <main> <Header /> <div className="content">{children}</div> </main> </> ); }

ここに、ブログのラッパーとして使用するLayoutコンポーネントがあります。 ページの先頭に表示するメタデータと表示するコンポーネントを受け取ります。

components/Post.js ：

 import Link from 'next/link' import { HeadPost } from './HeadPost' export const Post = ({ post }) => { const { link, module: { meta }, } = post return ( <article> <HeadPost meta={meta} /> <Link href={'/blog' + link}> <a>Read more →</a> </Link> </article> ) }

このコンポーネントは、ブログ投稿のプレビューを表示する役割を果たします。 小道具として表示するpostオブジェクトを受け取ります。 次に、destructuringを使用して、オブジェクトから表示する投稿とmetaのlinkを引き出します。 これで、データをコンポーネントに渡し、 Linkコンポーネントを使用してルーティングを処理できるようになりました。

components/BlogPost.js ：

 import { HeadPost } from './HeadPost' export default function BlogPost({ children, meta}) { return ( <> <HeadPost meta={meta} isBlogPost /> <article>{children}</article> </> ) }

BlogPostコンポーネントは、単一の記事をレンダリングするのに役立ちます。 表示する投稿とそのmetaオブジェクトを受け取ります。

これまで多くのことを取り上げてきましたが、表示する記事はありません。 次のセクションで修正しましょう。

MDXで投稿を書く

import BlogPost from '../../../components/BlogPost' export const meta = { title: 'Introduction to Next.js', description: 'Getting started with the Next framework', date: 'Aug 04, 2020', readTime: 2 } export default ({ children }) => <BlogPost meta={meta}>{children}</BlogPost>; ## My Headline Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque maximus pellentesque dolor non egestas. In sed tristique elit. Cras vehicula, nisl vel ultricies gravida, augue nibh laoreet arcu, et tincidunt augue dui non elit. Vestibulum semper posuere magna, quis molestie mauris faucibus ut.

ご覧のとおり、投稿のmetaと本文を受け取るBlogPostコンポーネントをインポートします。

パラメータchildrenは、ブログ投稿の本文、または正確には、 metaオブジェクトの後に続くすべてのものです。 投稿のレンダリングを担当する関数です。

この変更により、 index.jsファイルに移動して、ホームページに投稿を表示できます。

投稿の表示

import { Post } from "../components/Post"; import { posts } from "../getAllPosts"; export default function IndexPage() { return ( <> {posts.map((post) => ( <Post key={post.link} post={post} /> ))} </> ); }

ここでは、 Postコンポーネントとblogフォルダから取得した投稿をインポートすることから始めます。 次に、記事の配列をループし、投稿ごとに、 Postコンポーネントを使用して表示します。 これで、投稿を取得してページに表示できるようになりました。

ほぼ完了です。 ただし、 Layoutコンポーネントはまだ使用されていません。 ここで使用して、コンポーネントをラップすることができます。 しかし、それは記事のページには影響しません。 そこで、 _app.jsファイルが役立ちます。 次のセクションでそれを使用しましょう。

_app.jsファイルの使用

ここで、アンダースコア記号（ _ ）は非常に重要です。 これを省略すると、Next.jsはファイルをページ/ルートとして扱います。

 import Layout from "../components/Layout"; export default function App({ Component, pageProps }) { return ( <Layout pageTitle="Blog" description="My Personal Blog"> <Component {...pageProps} /> </Layout> ); }

Next.jsは、 Appコンポーネントを使用してページを初期化します。 このファイルの目的は、ファイルをオーバーライドして、プロジェクトにいくつかのグローバルスタイルを追加することです。 プロジェクト全体で共有する必要のあるスタイルやデータがある場合は、ここに配置します。

これで、CLIでプロジェクトフォルダーを参照し、次のコマンドを実行して、ブラウザーでブログをプレビューできます。

 yarn dev

または、npmで：

 npm run dev

ブラウザでhttps://localhost:3000を開くと、次のように表示されます。

最終結果のプレビュー

すごい！ 私たちのブログはよさそうだ。 Next.jsとMDXを使用してブログアプリの構築が完了しました。

結論

このチュートリアルでは、MDXライブラリを使用してブログを作成することでNext.jsについて説明しました。 Next.jsフレームワークは、ReactアプリをSEOに対応し、高速にする便利なツールです。 静的で動的なJAMstackWebサイトをすぐに構築するために使用できます。これは、本番環境に対応しており、いくつかの優れた機能が付属しているためです。 Next.jsは大企業で広く使用されており、パフォーマンスは向上し続けています。 それは間違いなくあなたの次のプロジェクトのためにチェックする何かです。

完成したプロジェクトはCodeSandboxでプレビューできます。

読んでくれてありがとう！

資力

これらの有用なリソースは、このチュートリアルの範囲を超えてあなたを連れて行きます。

  • Next.jsのドキュメント
  • Next.jsとMDXのドキュメント
  • 「Next.jsアプリを作成する」、Next.js