はじめに

今時なサイトを、かつ管理が楽になるように、wordpressをガッちんこしようとしたが、一部諦め要素は入りつつも、まぁ、とりあえず第一弾としてはOKな話。

Chapter1

今時なサイトを作りたく、かつ管理を楽にしたいので、タイトル通りな環境を目指した。threejsと、nextjsとの良い感じをググってると、react-three-fiberを発見。

これ、めっちゃ良いじゃん、コンポーネントで楽にかけると思い、

npm install three @react-three/fiber

が、依存関係で失敗。react18が必要。ベースになっている有難い、nextjs-wordpress-starterは、react17、react-helmet　も17が必要。
最新には対応していない。

ならば、reactを１８に上げて、react-helmetをreact-helmet-asyncに上げて、helmetの箇所を書き換えれば、いけるでしょ？

と明日への課題を見つけて、朝方爆睡。

Chapter2

睡眠を糖分を充分にとって作業再開。

のあたりを参考にすると、そもそものreactの知識不足と、
src/pages/_document.js　に書かれている

Helmet.renderStatic() 
helmet.htmlAttributes.toComponent()

のくだりがよくわかってないので、置き換え作戦失敗

で、結果、package.jsonとして、以下のようになった。

{
  "name": "next-wordpress-starter",
  "homepage": "https://next-wordpress-starter.spacejelly.dev",
  "version": "0.1.0",
  "license": "MIT",
  "author": "Colby Fayock <hello@colbyfayock.com>",
  "scripts": {
    "build": "next build",
    "wpe-build": "npm run build",
    "dev": "next dev",
    "export": "next export",
    "format": "yarn lint --fix",
    "format:no-path": "yarn lint:no-path --fix",
    "lint": "eslint .",
    "lint:no-path": "eslint",
    "start": "next start -p ${PORT:=3000}",
    "prepare": "husky install"
  },
  "lint-staged": {
    "**/*.js": "yarn format:no-path",
    "**/*.scss": "yarn prettier --write"
  },
  "dependencies": {
    "@apollo/client": "^3.5",
    "date-fns": "^2.28.0",
    "dotenv": "^16.0.1",
    "fuse.js": "^6.6.2",
    "graphql": "^16.4.0",
    "he": "^1.2.0",
    "loader-utils": "^3.2.0",
    "next": "12.1.0",
    "next-compose-plugins": "^2.2.1",
    "nextjs-progressbar": "^0.0.14",
    "parameterize": "^1.0.0",
    "path": "^0.12.7",
    "playwright": "^1.21.1",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-helmet": "^6.1.0",
    "react-icons": "^4.4.0",
    "rss": "^1.2.2",
    "sass": "^1.52.1",
    "style.css": "^1.0.3",
    "three": "^0.141.0",
    "gsap": "^3.10.4"
  },
  "devDependencies": {
    "eslint": "8.11.0",
    "eslint-config-next": "^12.1.6",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.30.0",
    "husky": "^7.0.4",
    "lint-staged": ">=12.5.0",
    "prettier": "2.6.0"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/colbyfayock/next-wordpress-starter"
  },
  "bugs": {
    "url": "https://github.com/colbyfayock/next-wordpress-starter/issues"
  }
}

この状態で、簡単なgsap、threejsを使ったテストのページはできたが、gltfの読み込みはまだ。

HTMLコーダーと、フロントエンジニアの大きな壁を知った週間だった。

Nextjs とgsap と wordpress をガッちんこしたかった話

はじめに

目次

Chapter1

Chapter2

参考文献