From React to Next.js

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>
  );
}