Zenn
🐣

GitHub PagesにNext.jsでポートフォリオ作ってみた

2023/08/17に公開
Next.js
React
GitHub Actions
Tailwind CSS
GitHub Pages
tech

モチベーション

  • 2023年10月からの仕事を探す中で、みんな作っている（？）ポートフォリオを作ってみようと思った
  • どうせ作るなら新しいことにチャレンジしてみようと思った
    • Next.jsはまだ使ったことがなかった（本を読んだくらい）
    • Vercelにデプロイしたことはあったが、GitHub PagesにデプロイしたこともGitHub Actionsを使ったこともなかった

環境

  • Node: 18.17.1
    • 当初 16.14.0 を利用していましたが、npm run dev を実行し http://localhost:3000 にアクセスしても ERR_CONNECTION_REFUSED となってしまったためバージョンを上げました
    • System Requirements には Node.js 16.8 or later. って書いてあるんですけどね・・・
  • Next.js: 13.4.13
  • React: 18.2.0
  • TypeScript: 5.1.6

参考にさせて頂いたサイト

GitHub Pagesサイト作成手順

リポジトリー名

GitHub Pages サイトを作成する にも書かれていますが、リポジトリー名は <user>.github.io または <organization>.github.io とする必要があります。これを守らないリポジトリー名を付与したところHTMLやCSSはデプロイされましたが、画像がデプロイされない問題が発生しました。

Next.jsの導入

以下のコマンドを実行した際、App Routerを利用するか聞かれます。NextjsのSSGを使ってGithub Pagesサイトを作成する はおそらくNoの前提で書かれていますので、Yesを選択すると次の点が変わってきます。

npx create-next-app@latest .
	
Would you like to use App Router? (recommended) ... No / Yes

App Routerを利用する場合の違い

  • 違い1: 「pages\apiディレクトリの削除」は不要になる
    • そもそもpagesディレクトリが存在せずappディレクトリになっていると思います。またapiディレクトリも存在しません
  • 違い2: Configuration の通り next.config.js に output: 'export' を追加する必要がある
    • これを行わずにコードをPushするとビルドのときにエラーが発生します

ポートフォリオ作成に関するメモ

今回ポートフォリオを作成するにあたり利用した技術の感想やノウハウのメモです。

Next.js

  • 今回のポートフォリオにはページ遷移がないのでNext.jsのルーティング機能は利用していません
  • また、動的にデータを取得する必要もないので、getStaticPropsなども利用していません
  • ということでNext.jsっぽさは皆無！引き続き勉強していきます

Tailwind CSS

  • 初めてTailwind CSSを使ってみました
  • これまでReactでの開発の際は MUI を利用することが多く、MUIのsxに設定していた内容をClassNameに設定する印象です（Tailwind CSSのクラスを利用）
  • styled-componentsよりもとっつきやすく感じました
  • 一方で、コンポーネントを作成せずにページにHTML要素を配置しそのClassNameにTailwind CSSのクラスを書くこともできてしまうので危険ですね

コンポーネント開発

  • 今回も一部コンポーネントをAtomic Designっぽく切り出して作成してみました
  • Container/Presentorパターンにも取り組んでみました。ロジックとビューを分ける思想はもちろんいいと思いますが、今はまだついひとまとめにしたくなってしまうので継続し訓練が必要そうです
  • Container/Presentorパターンの多くはカスタムフックに置き換えることができる という意見もあり、そちらの方が自分はコードが読みやすくなるように感じました

バッジ

favicon

作成したポートフォリオ

https://shoji9x9.github.io/ に公開しています。ソースコードは https://github.com/shoji9x9/shoji9x9.github.io にあります。

ポートフォリオ作成後に気付きましたが、LAPRAS をポートフォリオ代わりにできるかもしれません（職務経歴などは公開できなさそうですが）。LAPRASの自分のページ も公開しておきます。

Discussion