質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

2888閲覧

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

yyyooo34343

総合スコア79

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

1グッド

1クリップ

投稿2020/05/31 16:08

編集2020/05/31 16:09

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
whiwhdiw👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

不要だと思われるもの

  • 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に関しては特別なディレクトリ(前述の通りルーティングに関わる)なので、移行前のルート定義に合わせてファイルを配置・命名するよう気をつけてください。

投稿2020/06/01 12:24

markey

総合スコア355

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yyyooo34343

2020/06/02 08:22

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

2020/06/02 12:49

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

2020/06/02 13:27 編集

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

2020/06/02 13:27

const Login: FC () => { // ... } export default Login とするとどうでしょうか?
markey

2020/06/02 13:34

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

2020/06/03 23:59

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

2020/06/04 12:29

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

2020/06/07 12:29

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問