react + typescript sqpアプリにnext.jsを入れたい

Question

react + typescriptで 簡単なspaアプリを作っています
スタイルはstyled-componentsというライブラリを使っています。

今作っている環境にnext.jsを入れたいのですが、途中から追加することってできるのでしょうか？
最初からやり直さないとできないのでしょうか？
またwebpackの設定なども変わるのでしょうか？

Answer 1

Next.js内部のWebpackの設定を上書きしたい場合は、ルートディレクトリにnext.config.jsというファイルを置いて、そこにWebpackの設定を記述できます。現在TypeScriptファイルのトランスパイルをts-loaderもしくはbabel-loaderをかまして行っていると思うのですが、その設定はデフォルトで入っているので記述しなくて大丈夫です。何の設定が足りないかは現在のSPAで設定されているWebpackによりますので、まずは何も書かずに動かしてみて、足りない設定をnext.config.jsに追加されると良いと思います。

Answer 2

途中から追加することってできるのでしょうか？

できるかできないかで言えばできますよ。ただ、Next.jsや同様のフレームワークに慣れていないと大変だと思うので、Next.js用の新しいリポジトリを作って徐々に移行されるほうが、一つずつエラーをつぶしていけていいのではないかと思います。

やらなければいけないこととして、

1. Next.jsのルールに従ってコードを移行する
2. ライブラリごとに特別な設定が必要な場合は対応する

1で言うと例えば、ルーティングです。Next.jsではpagesディレクトリにファイルを置くことでルーティングを表現するので、現在SPAでreact-routerなどを使っている場合は、そちらの仕組みに乗る必要があります。また、Webpackの設定については、基本的なものはNext.jsが内部に隠蔽しているのでこちらは何もしなくても動かせますが、使っているライブラリによって独自に設定を拡張しなければいけない場合は、拡張することは可能です。

2については、まさしくstyled-componentsは対応が必要です。Next.jsはSPAではなく、SSR(Server Side Rendering)やSSG(Static Site Generation)というアーキテクチャをとるので、SPAのときはうまく動いていたライブラリがNext.jsに移行した途端動かなくなったということが起こりえます。有名なライブラリであれば公式ドキュメントでServer Side Renderingという項目があったりするので、自分で調べながら一つずつエラーを解決していくことになります。

Comments

[yyyooo34343]

とてもわかりやすく説明いただきありがとうございます！
next.jsの内部にもweboackの設定ファイルがあるんですね！
現在の環境にwebpackの設定が入っていてそれを使いたいのですが、next.js内部のwebpackの設定を使わないといけなくなるのでしょうか？