Getting Started with Next.js - From React to Next.js | Learn Next.js
これをやってみました。
- Next.js は自動で
<html>
や<body>
タグを生成してくれるようなので、明示的に書かなくてもOK - 表示するページは
pages
フォルダに置くことでNext.js
が検知できるようにする。また、メインとなるReact Componentをexport default
する。 - 修正したコードは即座に反映される。これを
Fase Refresh
という。
import { useState } from 'react'; function Header({ title }) { return <h1>{title ? title : 'Default title'}</h1>; } export default function HomePage() { const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton']; const [likes, setLikes] = useState(0); function handleClick() { setLikes(likes + 1); } return ( <div> <Header title="Develop. Preview. Ship. 🚀" /> <ul> {names.map((name) => ( <li key={name}>{name}</li> ))} </ul> <button onClick={handleClick}>Like ({likes})</button> </div> ); }