Agile育成ブログ
未来を変える喜びを
未分類

Nextjs13 appディレクトリ


Warning: count(): Parameter must be an array or an object that implements Countable in /home/xs638785/agile-software.site/public_html/wp-content/plugins/rich-table-of-content/functions.php on line 490

Next.js 13の新機能であるappディレクトリは本ブログ公開時はbetaで現在も開発中ですがNext.js 13でプロジェクトを作成後にNext.jsの設定ファイルであるnext.config.jsにexperimentalとして設定を行うことで利用することができます。

appディレクトリはオプションなのでnext.config.tsに追加設定を行う必要があります。experimentalプロパティを追加してappDirをtrueに設定します。

appディレクトリに作成するファイルの内容をブラウザ上に表示するためにプロジェクトフォルダの直下にappディレクトリを作成しその下にpage.tsxファイルを作成して以下を記述します。

appディレクトリにpage.tsxファイルを作成後npm run devコマンドを実行するとappディレクトリのpage.tsxファイルとpagesディレクトリのindex.tsxファイルがconflictするためエラーが発生します。appディレクトリを利用するためにpagesディレクトリのindex.tsxファイルを削除する必要があります。pagesディレクトリの_app.tsxファイルも利用しないので削除します。

You cannot copy content of this page