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

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

# 目次
<!-- タイトルとアンカー名を編集 -->
1. [野望に満ち溢れてた初日ー全部最新の今時で行こう](#Chapter1)
1. [自分の今の実力を知った日ー大人になって安定バージョンで行こう](#Chapter2)
1. [参考文献](#reference)




<!-- 各チャプター -->
<a id="#Chapter1"></a>
# Chapter1
今時なサイトを作りたく、かつ管理を楽にしたいので、タイトル通りな環境を目指した。threejsと、nextjsとの良い感じをググってると、[react-three-fiber](https://docs.pmnd.rs/react-three-fiber/getting-started/introduction)を発見。

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

```
npm install three @react-three/fiber
```

が、依存関係で失敗。react18が必要。ベースになっている有難い、[nextjs-wordpress-starter](https://github.com/WebDevStudios/nextjs-wordpress-starter)は、react17、react-helmet　も17が必要。
最新には対応していない。

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

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



<a id="#Chapter2"></a>
# Chapter2
睡眠を糖分を充分にとって作業再開。

https://yumegori.com/react_helmet_async_method

のあたりを参考にすると、そもそもの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コーダーと、フロントエンジニアの大きな壁を知った週間だった。


<a id="#reference"></a>
# 参考文献
- [nextjs-wordpress-starter](https://github.com/WebDevStudios/nextjs-wordpress-starter)
- [nextjs](https://nextjs.org/)
- [gsap](https://greensock.com/gsap/)
- [threejs](https://threejs.org/)
- [react-three-fiber](https://docs.pmnd.rs/react-three-fiber/getting-started/introduction)
- [react-helmet-async](https://github.com/staylor/react-helmet-async)