もう一回 Next.js - KAEDE Hack blog

set up

npx create-next-app next-2020 --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"

2020年最後のってことで作る

404 This page could not be found.

は？？？？

3001 を開けた

first-post

pages/first-post.js

export default function FirstPost() {
  return <h1>First Post</h1>
}

http://localhost:3001/first-post

で動作を確認した

link

import Link from 'next/link'

export default function FirstPost() {
  return (
    <>
      <h1>First Post</h1>
      <h2>
        <Link href="/">
          <a>Back to home</a>
        </Link>
      </h2>
    </>
  )
}

中身に Link a を入れる

head

      <Head>
        <title>First Post</title>
      </Head>

これを追加

Layout

components/layout.js を作成

export default function Layout({ children }) {
  return <div>{children}</div>
}

first-post で使用する

import Layout from '../../components/layout'

    <Layout>
      <Head>
        <title>First Post</title>
      </Head>
      <h1>First Post</h1>
      <h2>
        <Link href="/">
          <a>Back to home</a>
        </Link>
      </h2>
    </Layout>

head も h1 h2 も Layout で wrap する

layout module css

components/layout.module.css を作成

.container {
  max-width: 36rem;
  padding: 0 1rem;
  margin: 3rem auto 6rem;
}

モジュールの CSS を作成する

import styles from './layout.module.css'

layout.js styles として使用する

_app.js

共通ファイル
pages/_app.js

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

Component に pageProps を渡していく
意味不明

import '../styles/global.css'

これを書くことで

styles/global.css が全体に反映される

posts

posts/[id].js
ここに全てを書く
ここで getStaticPaths を使うようになる