react + typescriptのspaアプリをnext.jsに移行したい ディレクトリどういう構成にすればいいか

Question

https://teratail.com/questions/265846
上記の質問の続きになります

yarn create next-app　コマンドを実行
yarn add next react react-dom　コマンドを実行
touch tsconfig.json　コマンドを実行
yarn add --dev typescript @types/react @types/node　コマンドを実行
上記の4つのコマンドを実行しnext.jsの環境を構築しました。

この環境にreact + typescriptで作っていたspaアプリのファイルを移行しようと思います。

next.jsのディレクトリを見てみると以下のようになっていました。
react + typescriptのspaアプリを移行したいのですがnext.jsに移行した時、ディレクトリはどういう構成にしたらいいのでしょうか

// next.js
pages--
       api--
             hello.js
public--
　　　　　favion.ico
next.config.js
tsconfig.json

//react +  typescript (next.jsの環境に移行したい)のディレクトリ
components--
            atoms--
                    Botton.tsx
                    TextField.tsx
            layout--
                    Menu.tsx
            App.tsx
            routes.tsx
pages--
        Login.tsx
        Users.tsx
        UserList.tsx
index.html
index.tsx
eslint.js
tsconfig.json
webpack.config.js

Answer 1

全て詳細に説明すると長くなるので概要だけ説明しますね。
また、各ファイルにどんな内容が書かれているかわからないので、ファイル名から推測して話しています。

不要だと思われるもの

• index.tsx => ReactDom.render()しているだけのファイルであればNext.jsでは不要です。
• components/routes.tsx => Next.jsではルーティングをpagesディレクトリ内のファイルの命名で定義するため不要です。
• index.html => HTMLファイルは不要です。ただし、head要素内を編集したいなどの要望がある場合は、pagesディレクトリに_document.tsxというファイルを作ります。詳しくは調べてみてください。

そのままルートディレクトリに置くもの

• eslint.js
• tsconfig.json
• webpack.config.js(ただし、中身はnext.config.jsに移行する)

srcディレクトリに置くもの

• その他は基本的にルートディレクトリにsrcディレクトリを作り、その中に移行されると良いと思います。ただしsrc/pagesに関しては特別なディレクトリ(前述の通りルーティングに関わる)なので、移行前のルート定義に合わせてファイルを配置・命名するよう気をつけてください。

Comments

[yyyooo34343]

ありがとうございます。
src/pages/login.tsxを配置してlocalhost:3000/loginにアクセスしたのですが404
This page could not be found.となってしまいます。
next.jsはpages内にファイルを置けばそのurlにアクセスしたときに自動でそのファイルが表示されるのではないのでしょうか？

[markey]

Componentはdefault exportされてますでしょうか？

[yyyooo34343]

export const Login: FC = () => {
となっています

[markey]

const Login: FC () => {
// ...
}

export default Login

とするとどうでしょうか？

[yyyooo34343]

変わらなかったです

[markey]

- Next.jsのバージョンは9.1以上ですか？9.1未満であればsrc/pagesディレクトリは認識されません
- ルートディレクトリにpagesディレクトリはありませんか？その場合はsrc/pagesディレクトリが無視されます
- 表示されないのはloginページだけですか？他のページは表示できているようであればloginページの内部の問題かもしれません

[yyyooo34343]

バージョンは9.1以上でした。
ルートディレクトリにpagesディレクトリはありませんか？とはどういう意味でしょうか？
loginページだけではなく全てのページが表示されないです

[markey]

srcの中ではなく、tsconfig.jsonなどを置いている同じ階層にpagesディレクトリがないかという意味です。
pagesかsrc/pagesにファイルを作りコンポーネントをexport defaultしていればルーティングが設定されるはずなので、そうでなければ何かがおかしいのでエラーログをヒントに調べていくしかなさそうです。

[yyyooo34343]

いけました！！
ありがとうございました