Next.jsでウェブサイトを作った話

2023/01/31

2023/02/12


Next.jsでウェブサイト(すなわちこのサイト)を作った.

モチベ


  • Markdownで記事を書きたい
    • できれば記事をGitリポジトリで管理したい
  • WordPressは使いたくない
    • サーバー管理やアップデートやセキュリティ周りが面倒なので
  • フロントエンドを書きたい発作が起きた
    • 最大の理由はこれである

使っているもの


React

ReactMetaがメンテナンスを主導しているJavaScript用のUIライブラリ.

Next.js

Next.jsVercelがメンテナンスを主導しているWebアプリケーションフレームワーク. Reactの上に作られていて,ルーティングやServer Side Rendering(SSR)などの機能を提供してくれる.

TypeScript

動的型付け言語を見るとアレルギー反応が出るので,通常のJavaScriptではなくTypeScriptを使っている. 静的(漸進的)型付け最高!

Material UI (MUI)

MUIはMaterial Design用のコンポーネントを提供してくれるReact用ライブラリ. 簡単に良い感じのデザインを作れるので好き.

仕組み


配信システム

WordPressだとサーバーを借りて管理しないといけないし,セキュリティ的にも色々面倒. ということで本サイトはJamstackを採用している.

Next.jsは,Reactのコードから静的なhtml・jsファイルを生成するStatic Site Generation (SSG)を提供している. GitHub ActionsでSSGするCIを走らせ,できたファイルをGitHub Pagesで配信している.

2023/2/12追記: CloudflareのCDNでキャッシュしてもらうことにした.大体のファイルはGitHub PagesのサーバーじゃなくてCDNから配信されているはず.

記事フォーマット

ブログ記事はMarkdownで書けるようにした. 表示にはreact-markdownを使用している. 記事はリポジトリ内に.mdファイルとして保存していて, SSGする時に記事ファイルを読み込んでいる.

ソースコードを書いたらシンタックスハイライトをつけてくれるようにしたり,MUI/Next.jsと親和性が出るようにカスタマイズしている.

export const showExample = ()=>{
  console.log("こんな感じ");
}

参考資料



Shared on: