Next.jsのページやコンポーネントの拡張子

Question

Next.js（TypeScript無しの場合）のcomponentsやpagesの拡張子は、.jsか.jsxどちらにしたほうがいいのでしょうか。
また、どのように使い分けるべきなのでしょうか。

色々な解説記事を見ても、拡張子について言及しているものを見つけられずでして、教えて頂けると幸いです。
https://zenn.dev/shin_k_2281/articles/how-to-make-next-template-repository

Answer 1

結論

.jsか.jsxどちらにしたほうがいいのでしょうか。

.jsxです。

また、どのように使い分けるべきなのでしょうか。

こちらについては補足、追記ご確認いただきたく思います。

補足

どこかの書籍で過去にJSのこれら拡張子について解説しているところがあったのですが、今パッと見つけられなかったので取り急ぎ結論のみ記載しています。

書籍はこの辺りだったかと思います。

WEB+DB PRESS vol.112
WEB+DB PRESS vol.129
りあクト！ TypeScriptで始めるつらくないReact開発 第3.1版【Ⅱ. React基礎編】

ここから追記

jsxとは

jsxとは、

• JavaScriptとXMLの組み合わせできているもので、
• XMLのような書き方ができるようにしているES2015の構文拡張です。
  • 構文拡張 = 元々のJavaScriptにはないような構文を使えるようにしたもの

jsxで以下コードを記載すると、このようにコンパイルしてくれます。 (※) React公式から引用

<div>Hello {this.props.toWhat}</div>

↓

React.createElement('div', null, `Hello ${this.props.toWhat}`);

ご質問で使い分けをお悩みの通り、
どちらの拡張子を使用しても書くことはできるのですが、UIに関するソースコードを記載する上では、jsxのソースコードの方が読みやすいと感じるはずです。

じゃあ、.jsファイルに<div>Hello {this.props.toWhat}</div>と書くと動かないのかと言われるとそうではなく、実際はJSX.Elementとして解釈してくれてしまいます。

となったときに.jsxの方が良い点というのは、以下になると思います。

• React JSXとは？ その構文の必要性とJSとの違い内で上がっている説明
• UIコンポーネントであることを明示できる

Comments

[uky]

似たような質問が過去にも上がっていたので念の為共有しておきます。（投稿日が4年ほど前で古い情報となっているかもですが。。。

> https://teratail.com/questions/115211

[true_colors_20]

とても分かりやすく解説頂きありがとうございました！

[uky]

こちらこそお役に立てて何よりです。
返信ありがとうございました🙇‍♂️