Next.js webpackの導入

Question

react + typescript + styled-components＋ next.jsを使い開発をしようと思っていて
下記の二つを実行してnext.jsの環境を作りました。
・yarn create next-appを実行
・yarn add --dev typescript @types/react @types/nodeを実行

next.jsにはデフォルトでどんなwebpackの設定が入っているのでしょうか？
また開発をするときに上記の環境で開発するときにwebpackの設定でこれは入れておいたほうがいいよ！みたいなものありますか？

わかる人がいましたらご教授お願いしたいです。

Answer 1

いくつかnextの小規模なアプリを作ったことがあるのですが、自分はその際にwebpackに追加の設定はしたことがないので、個人的にはしばらくデフォルトで大丈夫かと思います。

ただ、おそらくNext.jsとstyled-componentsはそのままでは開発環境での相性が悪く、SSRモードでstyled-componentsが動作するように設定する必要があります。

具体的には $ yarn add --dev babel-plugin-styled-components した上で .babelrc に

{
  "presets": ["next/babel"],
  "plugins": [["styled-components", { "ssr": true }]]
}

を書かないと開発環境のHMRでCSSが上手く適用されなかったはずです。

Comments

[yuyuyuooo]

ご返信ありがとうございます！
.babelrcというのは.babelrcというファイルを自分で作ればいいのでしょうか？

[yuki-yano]

そうですね、Next.jsは特に設定しなくても.babelrcを自動で読むようになっているはずです。
babelrcについてはBabelについて調べると色々と情報が出てくると思います。

[yuyuyuooo]

そうなんですね！！
調べてみます！
ありがとうございます！！