website logo
Next.js + MDX

サイトのページに反映させる

ここでは、スニペットを登録する にて登録したスニペットをサイトに掲載したいと思います。

pagesフォルダにsnippetsフォルダを追加する

このプロジェクトでは、サイトの各ページを src/pagesフォルダ配下で管理しています。 src/pages/snippetsフォルダを作成しましょう。

[...slug].tsxで動的なルーティングを行う

[...slug].tsxを作成して 動的なルーティング を行います。

実装

いよいよ実装ですが、細かい解説は行いません。

src/pages/snippets/[...slug].tsx
import { DefaultPage } from '@/components/default';
import { components } from '@/components/mdx';
import { getAllPaths, getMdxBySlug } from '@/lib/mdx';
import { MdxSource } from '@/types/mdx';
import { GetStaticPaths, GetStaticProps, GetStaticPropsContext } from 'next';
import { MDXRemote } from 'next-mdx-remote';
import { NextParsedUrlQuery } from 'next/dist/server/request-meta';

type Props = {
  mdxSource: MdxSource;
};

export default function Page({ mdxSource }: Props) {
  return (
    <DefaultPage>
      <MDXRemote {...mdxSource} components={components} />
    </DefaultPage>
  );
}

const BASE_PATH = 'snippets';

type Params = NextParsedUrlQuery & {
  slug: string[];
};

export const getStaticPaths: GetStaticPaths<Params> = async () => {
  return {
    paths: getAllPaths(BASE_PATH),
    fallback: false,
  };
};

export const getStaticProps: GetStaticProps<Props, Params> = async ({
  params,
}: GetStaticPropsContext) => {
  const slug = params?.slug as string[];
  const mdxSource = await getMdxBySlug(BASE_PATH, slug);

  return {
    props: {
      mdxSource,
    },
  };
};

実はこのコード、src/pages/docs/[...slug].tsx の実装とほとんど変わりありません。

変更箇所は 2 点

- import { DocsPage } from '@/components/docs';
+ import { DefaultPage } from '@/components/default';

...
-    <DocsPage>
+    <DefaultPage>
      <MDXRemote {...mdxSource} components={components} />
-    </DocsPage>
+    </DefaultPage>

...

と

- const BASE_PATH = 'docs';
+ const BASE_PATH = 'snippets';

のみです。

ページの見た目を変更するためにDefaultPageを選択し、 データの取得先を変更するためにsnippetsに変更しました。

まとめ

ここでは、MDX ファイルを作成するだけで 簡単にサイトの構築から拡張まで行えることが確認できました。

次に行うことは、スニペットの一覧ページの作成です。

また、今回触れたMDXRemoteの設定方法は こちら を参照してください。

Next

一覧ページを設ける