{"id":733,"date":"2021-08-11T13:27:20","date_gmt":"2021-08-11T04:27:20","guid":{"rendered":"https:\/\/weseek.co.jp\/tech\/?p=733"},"modified":"2023-04-17T10:28:42","modified_gmt":"2023-04-17T01:28:42","slug":"next-js%e3%81%ae%e3%83%ac%e3%82%a4%e3%82%a2%e3%82%a6%e3%83%88%e3%83%91%e3%82%bf%e3%83%bc%e3%83%b3","status":"publish","type":"post","link":"https:\/\/weseek.co.jp\/tech\/733\/","title":{"rendered":"Next.js\u306e\u30ec\u30a4\u30a2\u30a6\u30c8\u30d1\u30bf\u30fc\u30f3"},"content":{"rendered":"

\u3053\u3093\u306b\u3061\u306f\u3002WESEEK \u306e \u7530\u6751<\/a> \u3067\u3059\u3002<\/p>\n

\u5148\u65e5\u3001 Next.js \u306e\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u306b Layouts \u306e\u30d1\u30bf\u30fc\u30f3\u306b\u3064\u3044\u3066\u306e\u30da\u30fc\u30b8\u304c\u8ffd\u52a0\u3055\u308c\u307e\u3057\u305f\u3002<\/p>\n

https:\/\/nextjs.org\/docs\/basic-features\/layouts<\/a><\/p>\n

<\/p>\n\n

Layout \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8<\/h1>\n

\u3059\u3079\u3066\u306e\u30da\u30fc\u30b8\u306b\u540c\u4e00\u306e\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u30d0\u30fc\u3084\u30d5\u30c3\u30bf\u30fc\u3092\u9069\u7528\u3055\u305b\u308b\u5834\u5408\u3001\u4e0b\u8a18\u306e\u3088\u3046\u306b Layout \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u4f5c\u6210\u3057\u3066\u5404\u30da\u30fc\u30b8\u3067\u518d\u5229\u7528\u3067\u304d\u308b\u3088\u3046\u306b\u3057\u307e\u3059\u3002<\/p>\n

\/\/ components\/layout.js\n\nimport Navbar from '.\/navbar'\nimport Footer from '.\/footer'\n\nexport default function Layout({ children }) {\n  return (\n    <>\n      <Navbar \/>\n      <main>{children}<\/main>\n      <Footer \/>\n    <\/>\n  )\n}<\/code><\/pre>\n
Layout \u30d1\u30bf\u30fc\u30f3<\/h1>\n
\u3059\u3079\u3066\u306e\u30da\u30fc\u30b8\u3067\u5358\u4e00\u306e Layout \u3092\u9069\u7528\u3059\u308b<\/h2>\n
\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u5168\u4f53\u30671\u3064\u306e Layout \u3057\u304b\u306a\u3044\u5834\u5408\u306f\u3001 Custom App<\/a> \u3092\u4f5c\u6210\u3057\u3001 Layout \u3067\u30e9\u30c3\u30d7\u3057\u307e\u3059\u3002
\nCustom App \u306f\u3001 .\/pages\/_app.js<\/code> \u306b\u4e0b\u8a18\u306e\u3088\u3046\u306b\u8a18\u8ff0\u3057\u3066\u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002
\n\u3053\u308c\u3067\u3001\u3059\u3079\u3066\u306e\u30da\u30fc\u30b8\u306e\u540c\u4e00\u306e Layout \u304c\u9069\u7528\u3055\u308c\u307e\u3059\u3002<\/p>\n
\/\/ pages\/_app.js\n\nimport Layout from '..\/components\/layout'\n\nexport default function MyApp({ Component, pageProps }) {\n  return (\n    <Layout>\n      <Component {...pageProps} \/>\n    <\/Layout>\n  )\n}<\/code><\/pre>\n
Custom App \u306b Layout \u3092\u8a18\u8ff0\u3059\u308b\u3068\u3001 Layout \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306f\u30da\u30fc\u30b8\u9077\u79fb\u3092\u3057\u305f\u969b\u306b\u518d\u5229\u7528\u3055\u308c\u3001 state \u304c\u4fdd\u6301\u3055\u308c\u307e\u3059\u3002<\/p>\n
\u30da\u30fc\u30b8\u3054\u3068\u306b\u7570\u306a\u308b Layout \u3092\u9069\u7528\u3059\u308b<\/h2>\n
\u30da\u30fc\u30b8\u3054\u3068\u306b\u7570\u306a\u308b Layout \u3092\u9069\u7528\u3055\u305b\u308b\u5834\u5408\u306f\u3001\u5404\u30da\u30fc\u30b8\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b getLayout<\/code> \u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002 getLayout \u5185\u306b\u306f\u3001\u30da\u30fc\u30b8\u3054\u3068\u306e Layout \u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002<\/p>\n
\/\/ pages\/index.js\n\nimport Layout from '..\/components\/layout'\nimport NestedLayout from '..\/components\/nested-layout'\n\nexport default function Page() {\n  return {\n    \/** Your content *\/\n  }\n}\n\nPage.getLayout = (page) => (\n  <Layout>\n    <NestedLayout>{page}<\/NestedLayout>\n  <\/Layout>\n)<\/code><\/pre>\n
Custom App \u306b\u306f\u3001\u4e0b\u8a18\u306e\u3088\u3046\u306b\u8a18\u8ff0\u3057\u307e\u3059\u3002\u5404\u30da\u30fc\u30b8\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b getLayout \u30d7\u30ed\u30d1\u30c6\u30a3\u304c\u5b9a\u7fa9\u3055\u308c\u3066\u3044\u308b\u5834\u5408\u306f\u30da\u30fc\u30b8\u3054\u3068\u306e Layout \u304c\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3055\u308c\u3001\u5b9a\u7fa9\u3055\u308c\u3066\u3044\u306a\u3044\u5834\u5408\u306f\u30da\u30fc\u30b8\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304c\u305d\u306e\u307e\u307e\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3055\u308c\u307e\u3059\u3002<\/p>\n
\/\/ pages\/_app.js\n\nexport default function MyApp({ Component, pageProps }) {\n  \/\/ Use the layout defined at the page level, if available\n  const getLayout = Component.getLayout || ((page) => page)\n\n  return getLayout(<Component {...pageProps} \/>)\n}<\/code><\/pre>\n
\u30c7\u30fc\u30bf\u30d5\u30a7\u30c3\u30c1<\/h2>\n
Layout \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u5185\u3067\u306f\u3001 useEffect<\/code> \u3084 SWR \u306e\u3088\u3046\u306a\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u4f7f\u7528\u3057\u3066\u3001\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u5074\u3067\u30c7\u30fc\u30bf\u306e\u30d5\u30a7\u30c3\u30c1\u3092\u884c\u3048\u307e\u3059\u3002\u30b5\u30fc\u30d0\u30fc\u5074\u3067\u5b9f\u884c\u3055\u308c\u308b\u3082\u306e\u3067\u306f\u306a\u3044\u305f\u3081\u3001 getStaticProps<\/code> getServerSideProps<\/code> \u306f\u4f7f\u7528\u3067\u304d\u307e\u305b\u3093\u3002<\/p>\n
\/\/ components\/layout.js\n\nimport useSWR from 'swr'\nimport Navbar from '.\/navbar'\nimport Footer from '.\/footer'\n\nexport default function Layout({ children }) {\n  const { data, error } = useSWR('\/api\/navigation', fetcher)\n\n  if (error) return <div>Failed to load<\/div>\n  if (!data) return <div>Loading...<\/div>\n\n  return (\n    <>\n      <Navbar links={data.links} \/>\n      <main>{children}<\/main>\n      <Footer \/>\n    <\/>\n  )\n}<\/code><\/pre>\n
\u53c2\u8003\u306b\u3055\u305b\u3066\u3044\u305f\u3060\u3044\u305f\u30b5\u30a4\u30c8<\/h2>\n