Next.js でポートフォリオサイトを作成しました。 さまざまなことを学びましたが、特にブログ作成において大きな成長がありました。

ポートフォリオサイトの概要と、どうやって学び、作成したのか、何を学んだのかを簡単にまとめました。

ポートフォリオの技術構成

Next.js 14

2024 年 11 月中旬ごろから開発をはじめめました。 その時点で、Next.js の 15 が出ていました。 はじめはそのバージョンで作業をしていましたが、依存関係のエラーが多数発生し、安定的な環境で開発を行いたいと考えたため 14 で進めることにしました。

ブログはローカル環境でマークダウンで記述し、デプロイ時に静的生成しています。

Motion

動きのある Web サイトにしたかったので、Motion を入れることにしました。

選定理由は 2 つあります。 1 つ目は、よく名前を目にしていて使ってみたかったからです。 2 つ目は、GSAP より簡単だと感じたからです。

Future Features

「とりあえず公開したい...！」という気持ちがあり、最低限の実装しかしておりません。 将来的には以下の機能を追加していこうと思います。

• ブログ記事のメタデータ生成 -> OGP 整えたあと画像も追加
• favicon
• OGP 自動生成
• RSS
• ダークモードへの対応
• 慣性スクロール
• 日英対応
• ブログの記事や画像のディレクトリ再考

ポートフォリオ作成過程

全体的にこのようなやり方でポートフォリオサイトを作成しました。

1. ポートフォリオに盛り込みたいことを考える
2. ポートフォリオサイトをたくさんみて、好きなパーツや見せ方を観察
3. ページ構成を決める
4. ひとまず今ある知識で作成する
5. 詰まった箇所、難しい箇所を深掘りする
6. 何度か作り直し
7. 完成

わからないことを理解するために何をしたか

Next.js サンプルの解読

Next.js Example: Portfolio Blog Starter

↑ こちらの、Next.js のブログサンプルでは SEO、画像生成、マークダウンを HTML にする方法などを含んでおり、コードを読むと理解が深まるのではと思い、1 行 1 行解読して何をしているのか理解していきました。

小さく試す

よく言われていることではありますが、小さく小さくさまざまなことを試しました。

• Node.js でファイルを読み取る、ファイルを作る、中身を書く、内容を取得する、特定のディレクトリにあるファイルを取得する...
• Motion のチュートリアルを行う、アニメーションを何パターンも試してまとめる、実際に実装したい動きに近いものをシンプルにして試す

制作過程で学んだこと

• MDX と markdown の違い
  • MDX は JSX を埋め込むことができる
• Node.js を使ってのファイルの操作方法
  • ディレクトリから .md 拡張子のつくファイルを選び内容を読み取る
• フロントマターの解析方法
  • Node.js で読み取った内容から正規表現を用いてフロントマターを解析する
• markdown のを読み取って HTML として出力する方法
  • remarkParse: markdown をパース
  • remarkGfm: GitHub Flavored Markdown で GitHub と同じような機能を使えるようにする
  • remarkRehype: markdown AST を HTML AST に変換
  • rehypeRaw: HTML 文字列を再パースし、HTML AST に統合
  • rehypeSanitize: サニタイズ（不正な HTML タグや属性を除去）
  • rehypeExternalLinks: 外部リンクを別ブラウザで開くように指定
  • rehypeShiki: Shiki を導入し、シンタックスハイライトを実現
  • rehypeStringify: HTML ASL を HTML 文字列へ変換
• SEO 対策方法（サイトマップの作成、robots の設定、スキーマの設定）

# Hello World

This is **Markdown**.

{
  "type": "root",
  "children": [
    {
      "type": "heading",
      "depth": 1,
      "children": [{ "type": "text", "value": "Hello World" }]
    },
    {
      "type": "paragraph",
      "children": [
        { "type": "text", "value": "This is " },
        { "type": "strong", "children": [{ "type": "text", "value": "Markdown" }] },
        { "type": "text", "value": "." }
      ]
    }
  ]
}

今回何が難しかったか？

Next.js が...というより、Node.js がわからず大変でした。 数ヶ月前にも Next.js でポートフォリオサイトを作ったのですが、そのときに比べて、今回は何をやっているのかをより明確に理解することができました。

以前はどこが Node.js の範囲、役割なのか？どこからが Next.js なのか？もはや何がどうなっているのかわからない...といった感じでした。

このポートフォリオサイトを作りながら、自分に合った勉強方法も再度見直すことができたので良い機会になりました。

引き続き、機能の追加や、他の作品（？）を作って、理解を深めていきます。