きっかけ
Qiitaの記事にてこのようなことが書かれていました。
これはあくまで自分の考えですがcreate-react-appは初心者の入門のためのツールであり
実開発者の…ましてサービスレベルで使うものではないと思っています。このツールが解決していることは複雑なビルド周りの設定を隠蔽して手早くReactを始められるようにすることであり、実開発における開発環境の構築を目的としているわけではありません。
脱create-react-app ~ 真面目に express × react 環境を構築する~（https://qiita.com/ohs30359-nobuhara/items/bdc06b2db1bef7af2439）
この記事は2022年4月現在から4年前の記事のため、当時と現在では状況が違うと思いますが、はたして現在の create-react-app は本番環境で使えるのかについて調査しました。
結論
- create-react-app に含まれるソフトウェア（webpack等）が最新ではないことがある。
- create-react-app で環境構築しても、デフォルトでインストールされた不要なパッケージはアンインストールできるが、余分なパッケージが多い場合（ SASS を使わない）には自前で環境構築した方が早い可能性はある。
参考資料
2020年8月に DEV Community に投稿された記事「Don’t use create-react-app: How you can set up your own reactjs boilerplate.」を参考にしながら考えます。
create-react-appのデメリット
記事中では以下のように記載されていました。
Difficult to add custom build configs. One way to add custom configs is to eject the app, but then it overrides the Only one build dependency advantage. The other way is you can use packages like customize-cra or react-app-rewired but then they have limited capabilities.
追加の設定が困難です。設定を追加する1つ目の方法は、npm run eject することですが、そうすると既定の dependency が上書きされます。もう一つの方法は、customize-cra や react-app-rewired などのパッケージを使う方法ですが、この場合機能が制限されます。
Abstracts everything. It’s important to understand the things that need to run a React app. But due to it’s Only one build dependency advantage, a beginner might think that react-scripts is the only dependency needed to run react apps and might not know that transpiler(babel), bundler(webpack) are the key dependencies which are used under the hood by react-scripts. This happened to me until I read this awesome article.
create-react-app はすべてを抽象化します。Reactアプリを動かすために必要なものを理解することが重要です。しかし、Only one build dependencyという利点から、初心者はreactアプリを動かすのに必要な依存関係は react-scripts だけだと思い、transpiler(babel) や bundler(webpack) が react-scripts がフード下で使用する主要依存関係だと知らない可能性があります。
CRA is bloated – IMO. For example, CRA comes with SASS support, if you are using plain CSS or Less it’s an extra dependency that you will never use. Here is a package.json of an ejected CRA app.
私の考えでは create-react-app は肥大化しています。例えば、create-react-app は SASS をサポートしていますが、もしプレーンな CSS や Less を使っているなら、それは決して使うことのない余分な依存関係です。
Don’t use create-react-app: How you can set up your own reactjs boilerplate.（https://dev.to/nikhilkumaran/don-t-use-create-react-app-how-you-can-set-up-your-own-reactjs-boilerplate-43l0）
この記事に対してのコメント欄で興味深いものを以下に抜粋します。詳細はこちらでご覧ください。
Another disadvantage is, you’re forced to use whatever dependencies CRA requires, including an older version of webpack and babel-loader. CRA is an entire version behind the current webpack version. Installing a newer version will simply break react-scripts.
もう一つの欠点は、古いバージョンのwebpackやbabel-loaderなど、CRAが必要とするあらゆる依存性を使わざるを得ないことです。CRAは、現在のwebpackのバージョンより1バージョン遅れています。新しいバージョンをインストールすると、単にreact-scriptsが壊れるだけです。
Brian Blankenship（https://dev.to/c0dezer019/comment/1f914）
じゃ create-next-app はどうなんや？
Google検索してみると、「脱 create-react-app」はヒットしても「脱 create-next-app」はヒットしないので、Next.js の環境を自前で作る場合は、Googleに頼らずにやる必要があります。
Next.js にはプラグインのエコシステムがないので、Reactプロジェクトのように dependency を追加 / 削除 する必要がないのだと思います。
おそらく Next.js は初めから Vercel にデプロイすることを想定して開発されたフレームワークなので、本番環境でも大丈夫なようにスリムな構成になっているのだと思われます。
マニュアルセットアップは以下でできます。とは言っても Next は Zero Dependencies なので create-next-app しようが、マニュアルセットアップしようがインストールされる中身は同じです。
npm install next react react-dom
# or
yarn add next react react-dom
# or
pnpm add next react react-dom