どこが違うか

Next と React はどこが違うか

codepen の環境とnext の環境。

codepen の環境は react なので 名前が App だが、next は Home である。

それだけか? next の初期画面で試して見よう。

const App = () => {

に直す。

ImageタグはNextのものなので使えないので消す。

See the Pen nextdifference by kalz2q (@kalz2q) on CodePen.

さっき Next の初期画面と書いたのは、create-next-app で新しいプロジェクトを作って npm run dev , localhost: 3000 で最初に示されるページで、page.tsx を編集するとこのページが変化します。

で、上に示されているのはそれをなるべく崩さないように Codepen の環境に持っていった時のもの。

Codepen では

ReactDOM.render(<App />, document.getElementById("app"));

と言うような風に ReactDOM を呼びだすので、ここの App を Home にする方が簡単かと、最初思ったのですが、

export default function Home() {

は React ではエラーになる。 確か function と言うのはない、と叱られたような。

そんななので、

const App = () => {
...
...

ReactDOM.render(<App />, document.getElementById("app"));

の間に Next の page.tsx コピペしてあとは Codepen に任す。

それより!!!!

逆に様々なサイトで codepen でコードと実行結果をオープンにしてくれているのでそのプログラムを Next 環境に持っていって試す。

これが今は一番楽しいと言うか生産的です。