公式ブログ：

読みながらメモしたこと：

• CLIでアップグレードが簡単にできるようになった
• page routerはreact18、app routerはreact19
• 直接関係ないtaskは後回しにして処理できるafter機能_https://nextjs.org/docs/canary/app/api-reference/functions/unstable_after
• Next.js serverのlifecycleにアクセスしてパフォーマンス状態を見たり、エラーのsourceを追跡したりできるinstrumentation機能
• ESLint9もサポートされた
• 開発環境で何度もapiを呼ばないで再利用してくれるHMR_https://nextjs.org/docs/app/api-reference/next-config-js/serverComponentsHmrCache
• static generationをfasterするために、cacheを使う流れになってるときは他のページで同じような処理をしている部分をreuseさせてrequest回数を節約してる
• Nodeが18.18になった
• improvement：create-next-appで立ち上げるとdefaultで.envはignoreにしてくれるようになった
• improvement：groval cssを階層深いcss moduleにmergeするのは避けよう

３つのリポをアップデートさせるうちにエラーに引っかからない順序が分かってきた

依存関係が崩れてしまって大変なことになるので、今回はいじらないという判断が無難。

voltaで管理している場合は以下のコマンド

volta pin node@18.18

next.js15にする時、npmのエラーで弾かれて先に進まない&直した後途中から始められない現象で苦しんだので、先にnpmが通るか確認しておく。

エラーになったら、yarnくらいの柔軟さをお願いしてみる。

npm install --legacy-peer-deps

これは言わずもがなっ

今回新たに登場したcodemodで自動でアップデートができるようになった。

npx @next/codemod@canary upgrade latest

このコマンドを叩くと、質問が出てくる。

Need to install the following packages:
@next/[email protected]
Ok to proceed? (y)

→y

? Do you prefer to stay on React 18? Since you're using both pages/ and app/, we recommend upgrading React to use a consistent version throughout your app. › (y/N)

→y

? Enable Turbopack for next dev? › (Y/n)

→Y

Instructions:
↑/↓: Highlight option
←/→/[space]: Toggle selection
a: Toggle all
enter/return: Complete answer
◉ (v15.0.0-canary.179) app-dir-runtime-config-experimental-edge - Transform App Router Route Segment Config runtime value from experimental-edge to edge
◉ (v15.0.0-canary.171) next-async-request-api
◉ (v15.0.0-canary.153) next-request-geo-ip

→Enter

ここで、npm installが通せていないとエラーになって中断されてしまう。

そうなったら、package.json内のnext.jsのversionの差分を戻し、以下のコマンドでキャッシュやnode_moduleなどを一旦消して依存関係を再インストール

yarn cache clean && rm -rf node_modules yarn.lock && yarn install

その後、npx @next/codemod@canary upgrade latestをリベンジするとうまくいく。

問題なくupgradeが進むと、app内のファイルが自動で修正した差分が上がってくる。

最後にVercelでdeployするかを聞かれる。(私はNetlifyなのでnを選択した)

? Is your app deployed to Vercel? (Required to apply the selected codemod) › (Y/n)

→n

これは人によって違うかもしれない。

私の場合はCSSの記述にメスが入った…^^;

 ./styles/global.css:140:14
Parsing css source code failed
  138 |   tab-size: 2;
  139 | }
> 140 | pre :global(code) {
      |              ^
  141 |   overflow: auto;
  142 |   -webkit-overflow-scrolling: touch;
  143 | }

'global' is not recognized as a valid pseudo-class. Did you mean '::global' (pseudo-element) or is this a typo? at [project]/styles/global.css:139:13

module.cssにもなぜか:global()をいれてて直した。せっかくなので、ちゃんと勉強することにした。

• global.cssについての確認

• CSS moduleは異なったfile内であれば同じclass名を使ってOK

• :grobal は、cssではなくHTMLの属性
• どの要素にでも指定できる属性

この他にも、paragraphブロックをインデントした時に、１マス空白になっていないことも分かった。

インデントは、Children内の要素に入る。

const Paragraph = ({ block, headings }) => (
  <p className={colorClass(block.Paragraph.Color)}>
    {block.Paragraph.RichTexts.map((richText: interfaces.RichText, i: number) => (
      <RichText richText={richText} key={`paragraph-${block.Id}-${i}`} />
    ))}
    {block.Paragraph.Children ? <NotionBlocks blocks={block.Paragraph.Children} headings={headings} /> : null}
  </p>
)

<p>の親を<p>にするなというエラーにもなっているので分けることにした。

const Paragraph = ({ block, headings }) => (
  <>
    <p className={colorClass(block.Paragraph.Color)}>
      {block.Paragraph.RichTexts.map((richText: interfaces.RichText, i: number) => (
        <RichText richText={richText} key={`paragraph-${block.Id}-${i}`} />
      ))}
    </p>
    {block.Paragraph.Children && (
      <div style={{ paddingLeft: "1em" }}>
        <NotionBlocks blocks={block.Paragraph.Children} headings={headings} />
      </div>
    )}
  </>
)

以上。

easy-notion-blogを使いはじめて３年が終わろうとしている。

２年目から始めた自己メンテナンス作業だったけど、今まで作業ができたのは６割くらいChatGPTのおかげ。課金して、どうにかeasyを使い続けたくって意地でやってきたけど、いい加減技術をお金で買うのは辞めようという思考になってきた。

エラーメッセージのどこを見たら手がかりなのか、

その手がかりからどんな可能性が考えられるのか、

考えられる可能性の中で確率が高そうなのはどれなのか、

いつもハマってしまうことは何か、

そのために何を気をつければいいのか、

ChatGPTをfree版に戻して、語学で使っている拡張機能だけで英文を解読してみる試みをしたところ、意外とどうにかなった。完全に１人ではできないけど、自分なりに考えて、考えて、試した結果、やっぱ聞かないと分からないことだけをChatGPTに質問して助けてもらった。ペース的には、１つ質問して返ってきた内容を参考に実行してみるとエラーを直せる…という感じで【１往復１エラーの解決】という手応えは大きかった。

メンテナンスがないと、コードに触れる機会が無いので１つ１つのアップグレードを少しでも意味あるものにできるように４年目も頑張ろうという思いでいっぱいです ☺️

多分もう、easyなんて使ってる人いないんだろうな〜とか思うけど、そんなのどうでもよくって自分の手で動かせるように最新技術を取り込んでる感じがたまらなく楽しくなっておりますw多分、誰にも伝わらないだろうけど、素人は素人なりにマニアックに楽しみを見つけた…みたいな感じです。