🐥

【Next.js】基礎から始めるNext.js API Routes【１２Layout Component】

2022/12/21に公開

Next.js

Prisma

tech

【１２Layout Component】

YouTube: https://youtu.be/W3r86FIzSaQ

https://youtu.be/W3r86FIzSaQ

今回はレイアウトのコンポーネント作成のみになりますので、
お時間の無い方や途中で分からなくなってしまった場合は
こちらからコードをコピーしてしまっても大丈夫です。

components/Layout.tsx

import Head from 'next/head'
import { FC, ReactNode } from 'react'

interface Props {
  children: ReactNode
}

const Layout: FC<Props> = ({ children }) => {
  return (
    <div className="max-w-7xl mx-auto">
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className="py-4">{children}</main>

      <footer className="p-3 text-center">
        <span>&copy; Web Life CH</span>
      </footer>
    </div>
  )
}

export default Layout

pages/index.tsx

import { useEffect } from 'react'
import Layout from '../components/Layout'

export default function Home() {
  useEffect(() => {
    ;(async () => {
      const res = await fetch('/api/users')
      const users = await res.json()
      console.log(users)
    })()
  }, [])

  return (
    <Layout>
      <div className="flex flex-col justify-center items-center">
        <h2 className="text-4xl text-black font-sans p-4 mt-6">
          Welcome to <a href="https://nextjs.org">Next.js!</a>
        </h2>
      </div>
    </Layout>
  )
}

【１２Layout Component】

Discussion