私たちの旅：Logto SDKサンプルをNext.js 13アプリルーターに移行する

"

紹介#

Logtoでは、[@ logto / next](https: //docs.logto.io/docs/recipes/integrate-logto/next-js/)という名前のNext.js SDKを提供しています。これはsample projectと共に提供されています。このプロジェクトは、従来の"pages"フォルダーを使用してLogtoをNext.jsに統合する方法を効果的に示しています。APIルート、getServerSideProps、クライアント側のフェッチ、さらにはエッジランタイムの例も提供しています。

Next.js 13では、画期的なApp Router（以前はアプリディレクトリと呼ばれていました）が導入され、新機能と規則が開発者コミュニティで急速に人気を博しました。 LogtoのNext.js SDKがこれらの新機能を完全にサポートしていることから、このApp Routerを使用して新しいサンプルプロジェクトを作成することに触発されました。

この投稿では、App Routerを使用して新しいプロジェクトに既存のサンプルプロジェクトを移行する詳細をご紹介します。プロジェクトは、旧サンプルプロジェクトを基に作成され、公式の移行guideに従いました。プロセスにはいくつかのステップが含まれています：ページとレイアウトの作成、APIルートの移行、サーバーコンポーネントとクライアントコンポーネントの利用。

移行プロセス#

ページレイアウト：新しい構造#

オリジナルの設定では、SWRフェッチャーを設定する_app.tsxファイルと、ホームページとして機能するindex.tsxファイルを使用していました。

App Routerでは、これらがlayout.tsxとpage.tsxになります。 layout.tsxファイルにはコア情報が含まれ、page.tsxは旧index.tsxファイルの機能を反映しています。

クライアントコンポーネント#

最初のステップで一つのつまずきが発生しました：ボタンの"onClick"ハンドラの設定が成功しなかったため、エラーメッセージが表示されました。「イベントハンドラはクライアントコンポーネントのプロップに渡すことはできません。相互作用が必要な場合、これの一部をクライアントコンポーネントに変換することを検討してください。」

この問題を解決するために、問題が発生したセクションを別のコンポーネントに抽出し、ファイルの先頭にuse clientを付け加えました：

APIルート#

APIルートの移行は、/ pages / apiから/ app / apiに前のファイルを転送し、いくつかの微調整を行うことで簡単に行うことができました：

1. index.tsはroute.tsに名前が変更されました。
2. エクスポートされた関数はGETまたは他の関連するメソッド名に変更されました。

サーバーコンポーネント#

apiフォルダ内では、React Server Componentsでデータを取得できるserver-only関数を追加することができます。

/app/api/logto/userディレクトリには、get-user.tsxファイルがあります：

次に、この関数はpage.tsxで呼び出すことができます：

結論#

移行を完了すると、私たちのコードと構造は大幅に洗練され、直感的になりました。最初は難しそうに見えたものの、プロセス自体は決して困難ではありませんでした。私たちの経験が価値あるガイドとして役立ち、あなたが自信を持ってプロジェクトをApp Routerに移行できることを願っています。

比較のために、移行前後のプロジェクトへのリンクを以下に記載します：

移行前： https: //github.com/logto-io/js/tree/master/packages/next-sample

移行後： https: //github.com/logto-io/js/tree/master/packages/next-app-dir-sample

これらのプロジェクトを詳しく見ることで、この移行によってもたらされた変更と利点をよりよく理解することができます。