Closed13

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を使い続けた時があった
そのため様子見をしていたけど、これでちゃんと動くなら体感的には良い

ヤマチューヤマチュー

ページの整え

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

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に気づく…
 動かないときは、まず自分のミスから疑うべきと反省

ヤマチューヤマチュー

SEO部分の最適化

next-seoというライブラリを使い、SEO部分を最適化した

今まではデフォルトの設定を_app.tsxで管理していたのが気持ち悪かったが、next-seo.config.tsという設定ファイルに分離できたので良かった

https://github.com/garmeeh/next-seo

このスクラップは2022/08/29にクローズされました