innei

Next.js のLayouts RFCには長い間注目していました。この RFC が発表された当時、私はとても興奮していました。この機能の登場によって、初期データの最初の読み込みの問題が解決されるはずで、現在のさまざまな HACK 手法よりも優れた方法になるはずだと考えていました。

しかし、Next.js 13 では、Layout と Server Component などがすべて一緒にバンドルされ、アーキテクチャ全体が完全に書き換えられました。移行プロセスは非常に困難であり、新しい機能を使用するには、基礎となるルーティングから移行する必要があります。これは、アプリケーション全体を再度書き直すことに相当します。

この記事を書いている時点で、Next Conf が終了したばかりで、Layouts の初版は 13.0.0 と一緒にリリースされ、公開テストが 6 ヶ月間行われ、ついに安定版が公式にリリースされました。現在、それは App Router という名前に変更され、以前のアーキテクチャは Page Router となりました。両者は完全に互換性がなく、Vue 2 から Vue 3 ほど友好ではありません。

私は試してみたいと思っています。これを機に Kami のコード構造を整理したいと思います。そして：

• アクションライブラリを Framer Motion に移行する
• WindiCSS を TailwindCSS に移行する

以前にも、xLog が App Router の一部を移行するのを手伝いました。

現時点では、1 週間かかって 3 つのページを移行しました。疲れ果てているだけでなく、効果も良くありませんし、元の Page Router よりも悪いです。

いくつかの問題については、既にブルーバードで不満を言っています。とにかく、これらの日々は眠れず、書くこともできず、公開テストが 6 ヶ月も続き、安定版がリリースされるまで、安定性は長い間感じられませんでした。Next.js 12 から、私の信頼は完全に失われました。パッチバージョンからの多くの破壊的な変更、ビルドのクラッシュは日常茶飯事です。大きな約束をして、実際に出てきた機能はクソです。早く Nuxt に逃げましょう。

問題を簡単に挙げると：

1. parallel route がスロットとして使用されると、コンテキストの値が失われ、undefined が取得されるため、dev のホットリロードでのみ発生し、prod には影響しません。この問題は、私の使用方法が少し奇妙なためかもしれません。

2. parallel route がスロットとして使用され、ルーターがサブページに移動した後にリフレッシュするか、最初から直接サブページに移動すると、NEXT_NOT_FOUND が表示されます。本当に恥ずかしいですが、Next.js の parallel routes のスロットはすごいと言った直後に、バグが発生し、2 日間かけて構築したコードをすべて削除しました。

   1. https://github.com/vercel/next.js/issues/49569
   2. https://twitter.com/__oQuery/status/1656170967624826880?s=20

3. App Router には浅いナビゲーションの概念がありません。ドキュメントによると、同じグループのルートではレイアウトが共有されます。同じ動的ルートでは、レイアウトは同じであり、リフレッシュされない場合にのみ、レイアウトがアンマウントされ、再度マウントされますが、実際に使用すると、同じ動的ルート内で移動すると、レイアウト全体がアンマウントされ、データが失われます。くそったれ。

   1. https://github.com/vercel/next.js/issues/49553

4. generateMetadata は使用できません。ネストされたルートで、1 つのレイアウトから別のレイアウトに移動すると、リフレッシュされない場合があります。あるルートの generateMetadata が動かなくなり、ページをリロードする必要があります。現在、これを再現する最小限の例は作成できませんでしたが、私がいくつかのエッジケースに触れた可能性があります。現在、[https://github.com/Innei/kami-php] で以下のパスを使用して再現できます（他のパスでも同様）：

   1. https://kami-php.vercel.app/posts/programming/tailwind-built-in-colors-dark-modeにアクセスすると、タイトルは 让 Tailwind 内置颜色支持暗黑模式 です。
   2. ヘッダーナビゲーションの 文 をクリックして記事リストに移動します。この時点では 博文 - です。
   3. ヘッダーナビゲーションの 源 をクリックしてホームに戻ります。この時点では 博文 - で、このタイトルに詰まってしまいます。
   4. その後、どこに移動しても 博文 - になります。ページをリロードしない限り、変わりません。

まとめ：

• WindiCSS から TailwindCSS への移行は目が痛いです
• App Router への移行はイライラします
• Framer Motion は本当に使いやすく、アニメーションが素晴らしいです
• Nuxt に逃げることをお勧めします
• 休暇中のこれらの日々は、仕事よりも疲れています。

この記事はMix SpaceからxLogに同期されました。