2. プロジェクトの作成

2026/09/20 Copilot

プロジェクトを作成する

npx create-next-app@latest プロジェクト名

recommended defaultsはせずにカスタマイズする。Typescript、ES lint、＠Aliasはデフォルトと同じだが、srcディレクトリをありにすること！（ありが一般的）

そしたら、npm run devでとりあえず動くか確認する

MDXを使用可能にする

cd プロジェクト名
npm install @next/mdx @mdx-js/loader @mdx-js/react @types/mdx

プロジェクトフォルダの直下でNPMインストールする

別のプロジェクトですでにMDXを使っていたとしても、@next/mdx @types/mdxなどのインストールはプロジェクトごとに行うこと

Node.js(npm)の仕組みでは、パッケージ（ライブラリ）はパソコン全体ではなく、プロジェクトフォルダ内のnode_modulesという場所に個別にインストールされるか

その後、設定ファイルであるnext.config.tsを次のように変更して、MDXファイルやMDファイルを読み込めるようにする

import type { NextConfig } from "next";
import createMDX from "@next/mdx";

const nextConfig: NextConfig = {
  /* config options here */
  // .md や .mdx 拡張子のファイルをページとして扱えるように設定
  pageExtensions: ["js", "jsx", "md", "mdx", "ts", "tsx"],
};

const withMDX = createMDX({
  // 必要に応じて Remark / Rehype プラグインなどをここに追加できます
});

export default withMDX(nextConfig);

次に、src/mdx-components.tsxを作成する

import type { MDXComponents } from 'mdx/types';

export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    // Tailwind CSS で見栄えを調整したい場合、ここで要素のスタイルをカスタマイズできます
    h1: ({ children }) => <h1 className="text-2xl font-bold my-4">{children}</h1>,
    p: ({ children }) => <p className="leading-relaxed my-2">{children}</p>,
    ...components,
  };
}

最後に、src/app/about/page.mdxを新規作成する

import CropCalendar from '@/components/CropCalendar';

# 水耕栽培サイトについて

このサイトでは、室内でできる水耕栽培のノウハウや年間スケジュールをまとめています。

## 栽培カレンダー

Markdownの中に、先ほど作成したReactコンポーネントをそのまま埋め込むことができます！

あとは、トップページに

import Link from 'next/link';

return (
  <Link href="/about" className="">ABOUT</Link>
)

<Link>タグをおいてから、npm run devして確認する

BACK