Next.jsのSSGでポートフォリオを作成しているので、そのメモです

create-next-appで雛形を作成

npm create-next-app yamachoo.github.io

今の所、GitHub Pagesを使おうかと想定しているので、<username>.github.ioで作成
参考：GitHub Pages について

※このままだとyarnでインストールされる
　個人的にyarnよりnpmに慣れているので、いったん.gitを削除してnpmでインストールし直した

ヤマチュー

TypeScriptの導入

最近は勉強のためにも個人のプロジェクトにはTypeScriptを導入している

Next.jsの公式を参考に導入した
参考：Basic Features: TypeScript | Next.js

1つ気づいたこととして、普通にコマンドラインに従うと@types/nodeのインストールを促されない
気になったので、package-lock.jsonを検索してみたらjest-workerの依存関係でインストールが既にされていた

あまり良くない状態な気もするけど、現在の自分の運用方法ではインストールしなくても問題はないので、無駄なインストールを今回はしない方針でいくことにする
正直、この部分は他の人がどうしているのか気になる…

ヤマチュー

SSGのみで使う準備

今回はGitHub Pagesを使うため、SSRは使えない
そこでSSGのみを使う構成に変更していく

page/apiの削除

Next.jsのAPIはSSRになるので、今回は削除しておく

npm-scriptsの編集

- "build": "next build",
+ "build": "next build && next export",
- "start": "next start"

SSRで使うコマンドを削除し、next exportを追加する
参考：Advanced Features: Static HTML Export | Next.js

ヤマチュー

eslintとprettierの導入

いつも通りの流れだけど簡単にメモ

eslintを導入する

npm i -D eslint

あとはinitで作成

npx eslint --init

prettierを導入する

npm i -D prettier eslint-config-prettier

今回はStandard JSを使っているので、.prettierrc.jsonを作成して設定を合わせる

1つ気づいたこととして、eslint-config-prettierがv8から細かく設定を追加しなくても良くなっていたのが良かった
参考：prettier/eslint-config-prettier

ヤマチュー

huskyとlint-stagedの導入

npx mrm lint-staged

今回はじめてmrmを使った導入をした
感想としてはメチャクチャ便利！（ただブラックボックス感は半端ない笑）

個人的にhuskyがv5で仕様がガッツリ変わって、手動で導入するのに手間取り結局v4を使い続けた時があった
そのため様子見をしていたけど、これでちゃんと動くなら体感的には良い

ヤマチュー

Tailwind CSSの導入

npm i -D tailwindcss@latest postcss@latest autoprefixer@latest

npx tailwindcss init -p

./styles/globals.cssでTailwind CSSを読み込み

/* ./styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

参考：Install Tailwind CSS with Next.js - Tailwind CSS

ヤマチュー

ページの整え

ポートフォリオっぽくなるように雛形を整える

iconを入れたくなったので@heroicons/reactを導入してみた

またSSGをデプロイ前に確認するためにserveも導入した

ヤマチュー

GitHub Actionsの設定

.github/workflows/gh-pages.ymlを作成

name: github pages

on:
  push:
    branches:
      - main

jobs:
  build-deploy:
    runs-on: ubuntu-20.04
    steps:
      - uses: actions/checkout@v2

      - name: Use Node.js
        uses: actions/setup-node@v1
        with:
          node-version: '14.x'

      - name: Cache Node.js modules
        uses: actions/cache@v2
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-

      - name: Install dependencies
        run: npm ci

      - name: Build
        run: npm run build

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./out

※何故か上手く行かないので調べていると、途中でtypoに気づく…
　動かないときは、まず自分のミスから疑うべきと反省