Next.js 事始め

next.md

Next.js 事始め

https://nextjs.org/learn/basics/getting-started/setup

$ mkdir hello-next && cd hello-next
$ yarn init -y
$ yarn add -D react react-dom next
$ mkdir pages

$ cat > tmp << 'EOS'
{
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}
EOS
$ jq -sr '.[0]*.[1]' package.json tmp > tmp2
$ mv -f tmp2 package.json
$ rm tmp

$ yarn run dev

https://nextjs.org/learn/basics/getting-started/first-page

$ cat > pages/index.js << 'EOS'
export default function Index() {
  return (
    <div>
      <p>Hello Next.js</p>
    </div>
  );
}
EOS

https://nextjs.org/learn/basics/navigate-between-pages

$ cat > pages/about.js << 'EOS'
export default function About() {
  return (
    <div>
      <p>This is the about page</p>
    </div>
  );
}
EOS