Next.js勉強中です。
最近Next.jsを初めてインストールしてみました。
拡張子.tsxとは？っとなったのでメモします。
.tsxは「TypeScript + JSX」**を意味する拡張子
「TypeScript で JSX（React の HTML っぽい記法）を書くためのファイル」
📌 .tsx と .ts の使い分け まとめ
| 拡張子 | 使うべき場面 | 例 |
|---|---|---|
.tsx |
JSX を使う（コンポーネント & ページ） |
app/page.tsx, app/components/Button.tsx
|
.ts |
JSX を使わない（関数・API・型） |
app/lib/utils.ts, app/types/index.d.ts
|
✅ tsx だけで統一するとどうなる？
もし Next.js ですべて .tsx に統一すると…
❌ 関数だけのファイルでも JSX を意識する必要がある（無駄）
❌ 型定義だけのファイルでも .tsx を使うことになり、違和感がある
❌ 不要な JSX のチェックが入ってしまい、コンパイル時間が長くなる
🚀 まとめ
✅ 「Reactコンポーネント & ページ」は .tsx
✅ 「関数・API・型定義」は .ts
✅ 全部 .tsx で統一すると不要なオーバーヘッドが発生するので非効率
Next.js では 「画面を作る部分は .tsx」「ロジックや型だけの部分は .ts」 というルールで使い分けるのが最適！✨