• Next.js
  • MDX
  • 個人開発

Next.jsでブログサイトを作りました！

こんにちは！りのさきのこと申します！

この度、個人ブログサイト兼ポートフォリオサイトを開設しましたので、初投稿としてざっとこのサイトを作るまでの流れや使用技術などを書き残しておこうと思います。

このサイト自体についての概要は、サイト説明に記載しておりますので、よければそちらもご確認いただけますと幸いです！

大まかな流れ

まずはざっくり流れを書いておきます。詳しい部分はまた別記事に書こうと思います。

1. Figmaでのデザイン

実はこのデザイン自体は1年前からある程度まとまっていたんです。一年前に初めてのFigmaで学習がてら作成してみました。

ただ当時は別の個人開発プロジェクトや学習を優先していたので個人サイト開発が後回しになっていたのですよね...。今回ようやくそのデザインを実装できて嬉しいです。

2. 必要なSVGをAffinityで作成

と言っても、ヘッダーのナミナミの部分とファビコンのみの作成でした。Affinityは2025年秋から個人は無料で使えるようになり、私も今年から本当にありがたみを感じながら使っています（圧倒的感謝）。ベクター操作やSVGの高度な編集ができて非常に重宝するのですが、まだ全然使い慣れていないのでゆっくり慣れていこうと思います。

ちなみに、このページのトップの吹き出しのような形はCSSで実装しています。ページタイトルを声に出して読んでいるみたいに見えておもしろいなと思って作成しました。

3. Next.jsで実装

チュートリアルをちょこっと進めた段階で、待ちきれずに実装に入ってしまいました。 ですがReactを使った経験があったので、分からないところのドキュメントを調べるだけで割とスムーズに実装することができました。

ただ、クライアントサイドのコンポーネントとサーバーサイドのコンポーネントの使い分けが最初は分からずエラーを出しまくりました。関数コンポーネントの定義だけ見るとクライアントコンポーネントとサーバーサイドのコンポーネントはそっくりなんですが、実行されるタイミングやできることに大きな違いがあるという点に注意ですね。

4. でぷろぉい！

Vercelのおかげで本当に爆速でした...。 GitHubリポジトリのアクセス権をVercelに渡して、ビルドしてもらってであっという間に公開完了！！

環境変数でGoogle Analiticsのidを設定したのですが、環境変数の設定も直感的で便利！

一瞬すぎて、「あっ！？えっ！？公開しちゃったっ！？」って感じでした笑

人生初のウェブサイト公開でしたが無事デプロイできて嬉しいです！Vercelありがたやぁ～😭

主要な使用技術

NOTE

ここでは紹介しきれなかった各種OSSや素材の詳細はクレジット表記からご覧いただけます。

これらOSSには本当に頭が上がりません。各作者様やcontributorの皆さん本当にありがとうございます🙏

各技術選定理由

ブログ兼ポートフォリオサイトを作成するにあたって、以下のような希望がありました。

  • 最近よく使われているWeb技術の学習を兼ねたい
  • Markdownで記事を管理したい
  • ただのMarkdownというだけでなく色々自由にカスタマイズしたい
  • ちょっとした自作ツールを埋め込みたい

なぜ MDX ?

まずはMDXという技術にたどり着きました。簡単に言うとMarkdownの中に自作のJSX、カスタムコンポーネントをそのまま記述することができるという技術です。Markdownの中にMDXを記述できるという夢のような技術が存在するなんて...最初に知ったときは衝撃でした。

内部では、

  1. MDXのすべての要素をJSXに置き換える
  2. Next.jsが1.をHTMLに変換する

という挙動になっているそうです。なので事実上、巨大な関数コンポーネントのシンタックスシュガーのようなイメージです。

これを使うと例えば以下のように叫ぶことできます。

えむでぃえぇぇぇぇぇえええっくす！！！！！！

ちなみに上記のMDXソースはこんな感じ。

### なぜ MDX ?
 
まずは[MDX](https://mdxjs.com/)という技術 {"...中略..."} HTMLを生成しているそうです。
 
これを使うと例えば以下ように叫ぶことできます。
 
{"<Shout />はカスタムコンポーネントです"}
 
<Shout className="text-6xl">えむでぃえぇぇぇぇぇえええっくす！！！！！！</Shout>

TIP

先程述べたように、事実上JSXなのでコメントは通常Markdownの<!-- HTMLと同じ記法 -->ではなく{/* JavaScriptのコメント構文埋め込み */}を使用する点に注意です。

ついでに<Shout/>コンポーネント自体のソースも貼っておきます。 （フォントとアニメーションを付けただけのシンプル実装ですが...）

// KFCのせいでReact.FCがReact Fried Chickenにしか見えない件
export const Shout: React.FC<React.ComponentPropsWithoutRef<"em">> = ({
  children,
  className,
  ...props
}) => {
  return (
    <em
      className={`font-reggae-one animate-shake inline-block py-4 wrap-anywhere text-red-500 text-shadow-black text-shadow-lg ${className || ""}`}
      {...props}
    >
      {children}
    </em>
  );
};

これがあると表現の幅が大きく広がったり、試しに書いたコードをブログ記事で動く形で共有したり、ちょっとした機能を記事内に埋め込んだりできるというのが非常に魅力的ですね。また別記事でも詳しく取り上げる予定です。

なぜ Next.js ?

次にNext.js。

  • MDXを使用した静的サイト生成が得意
  • MDX系のエコシステムが充実している
  • 個人開発で以前使用したReactの延長線として利用できる
  • モダンなWebアプリによく使用されているのでキャッチアップしておきたい
  • 自作ツール埋め込みとも当然相性Good!

という理由でNext.jsを選定しました。

「学習したいから！」は技術選定理由として通常開発では絶対ありえない理由ですが、個人開発の特権として堂々と行使しました。結果的にメタタグについての知識やrobots.txt、ogp画像などなど、Webに関する様々なことを知ることができてよかったです。

なお有力候補にAstroがあり、こちらは静的サイトの構築に特化した非常に軽量かつ直感的に開発できるのが魅力のフレームワークだそうで、いつか触りたいですね。比較的新しいフレームワークにもかかわらず日本語訳されたドキュメントも充実していて驚きでした。

なぜ Vercel ?

最後にVercelです。こちらは

  • Next.jsと同じ組織が作っていることもあり相性抜群
  • GitHubリポジトリから直接デプロイできる
  • 個人利用なら無料枠で十分賄える

ということで、自前サーバーやクラウドサービスなどを用意するよりも遥かに安く簡単にサイト公開ができるものは他にない！とのことで採用しました。

最後に

最後までご覧いただきありがとうございました。

まだまだ小さなサイトですが、今後も記事を増やしたり、デザインや機能を改善していく予定です。ぜひ、今後の更新も楽しみにしていてください。