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 環境に持っていって試す。
これが今は一番楽しいと言うか生産的です。
