Next.jsのファイル構造とルーティングとJSX
Next.jsのファイル構造とルーティングとJSX
URL
ルート
/hello
ソースコードのディレクトリ
app/hello/page.tsx
ソースコード
code:app/hello/page.tsx
export default function Page() {
return <h1>Hello, Next.js!</h1>
}
ページの初期表示時、デフォルトに実行される関数
HTMLタグを値として直接JavaScript上に記述できるようにする仕組み
JSXコンパイラによってJSXからJavaScriptに変換される
こんな感じ
code:.jsx
return <h1>Hello, Next.js!</h1>
↓ JSXコンパイラ
code:.js
return React.createElement(
'h1',
null,
'Hello, Next.js!'
);
JSXを使用しない場合、こんな感じ
https://gyazo.com/17b9448015231da49fdf4cdabeeffa0d