🐥
【Next.js】基礎から始めるNext.js API Routes【12Layout Component】
【12Layout Component】
YouTube: 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>© 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>
)
}
Discussion