{"id":1721,"date":"2021-09-05T15:11:46","date_gmt":"2021-09-05T06:11:46","guid":{"rendered":"http:\/\/www.agile-software.site\/?p=1721"},"modified":"2021-09-07T06:41:34","modified_gmt":"2021-09-06T21:41:34","slug":"next-js%e3%83%96%e3%83%ad%e3%82%b0","status":"publish","type":"post","link":"https:\/\/agile-software.net\/?p=1721","title":{"rendered":"Next.js[\u30d6\u30ed\u30b0]"},"content":{"rendered":"\n

Next.js\u306e\u30a4\u30f3\u30dd\u30fc\u30c8<\/h2>\n\n\n\nhttp:\/\/www.agile-software.site\/2021\/05\/06\/node-js\/\n\n\n\n

tailwindcss\u306e\u30a4\u30f3\u30dd\u30fc\u30c8<\/h2>\n\n\n\n
$ npm install -D tailwindcss@latest postcss@latest autoprefixer@latest\n$ npx tailwindcss init -p<\/code><\/pre><\/div>\n\n\n\n
module.exports = {\n  purge: [".\/pages\/**\/*.{js,ts,jsx,tsx}", ".\/components\/**\/*.{js,ts,jsx,tsx}"],\n  darkMode: false, \/\/ or 'media' or 'class'\n  theme: {\n    extend: {},\n  },\n  variants: {\n    extend: {},\n  },\n  plugins: [],\n};<\/code><\/pre><\/div>\n\n\n\n
@tailwind base;\n@tailwind components;\n@tailwind utilities;<\/code><\/pre><\/div>\n\n\n\n
layout.js<\/h2>\n\n\n\n
\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u3084\u30d5\u30c3\u30bf\u30fc\u306a\u3069\u306e\u30da\u30fc\u30b8\u3067\u5171\u901a\u306e\u90e8\u5206\u3092layout.js\u306b\u66f8\u304f\u3053\u3068\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n
import Navigation from ".\/navigation";\n\nexport default function Layout(props) {\n  return (\n    <div className="flex flex-col min-h-screen">\n      <Navigation \/>\n      <main className="container flex flex-1 justify-center mx-auto px-5 max-w-screen-lg">\n        {props.children}\n      <\/main>\n      <footer className="flex items-center justify-center w-full h-20 text-sm border-t">\n        \u00a9 2021 NextJS Startup\n      <\/footer>\n    <\/div>\n  );\n}<\/code><\/pre><\/div>\n\n\n\n
navigation.js<\/h2>\n\n\n\n
import Link from "next\/link";\n\nexport default function Navigation() {\n  return (\n    <header className="container flex flex-row items-center mx-auto px-5 py-14 max-w-screen-lg">\n      <Link href="\/">\n        <a className="text-4xl font-bold text-red-300">NextJS Startup<\/a>\n      <\/Link>\n      <nav className="ml-auto">\n        <Link href="\/about">\n          <a className="mr-5">About<\/a>\n        <\/Link>\n      <\/nav>\n    <\/header>\n  );\n}<\/code><\/pre><\/div>\n\n\n\n
\u8a73\u7d30\u30da\u30fc\u30b8<\/h2>\n\n\n\n
_app.js\u3067\u3059\u3079\u3066\u306e\u30da\u30fc\u30b8\u3092\u521d\u671f\u5316\u3057\u3066\u3044\u308b\u3002<\/p>\n\n\n\n
import "..\/styles\/globals.css";\n\nimport Head from "next\/head";\nimport Layout from "..\/components\/layout\/layout";\n\nfunction MyApp({ Component, pageProps }) {\n  return (\n    <Layout>\n      <Head>\n        <meta name="viewport" content="width=device-width, initial-scale=1" \/>\n      <\/Head>\n      <Component {...pageProps} \/>\n    <\/Layout>\n  );\n}\n\nexport default MyApp;<\/code><\/pre><\/div>\n\n\n\n
\u8a73\u7d30\u30da\u30fc\u30b8<\/h2>\n\n\n\n
export default function About() {\n  return <div>about<\/div>;\n}<\/code><\/pre><\/div>\n\n\n\n
\u30c8\u30c3\u30d7\u30da\u30fc\u30b8<\/h2>\n\n\n\n
import Image from "next\/image";\nimport Head from "next\/head";\n\nexport default function Home() {\n  return (\n    <div>\n      <Head>\n        <title>NextJS Startup<\/title>\n      <\/Head>\n      <div className="mb-10 p-3 border rounded">\n        <Image\n          className="object-cover rounded"\n          src="\/top.png"\n          alt="top"\n          width={1280}\n          height={500}\n        \/>\n      <\/div>\n      <div className="flex justify-center flex-col items-center mb-10">\n        <div className="text-lg mb-3">BLOG POSTS<\/div>\n        <div className="border w-14"><\/div>\n      <\/div>\n    <\/div>\n  );\n}<\/code><\/pre><\/div>\n\n\n\n
API\u9023\u643a<\/h2>\n\n\n\n
Next.js \u304b\u3089 Django \u306e API \u3092\u30b3\u30fc\u30eb\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
\u6295\u7a3f\u4e00\u89a7\u3092\u53d6\u5f97<\/h3>\n\n\n\n
  const res = await fetch(new URL(`${SERVERURL}api\/post\/`));<\/code><\/pre><\/div>\n\n\n\n
\u53d6\u5f97\u3057\u305f\u6295\u7a3f\u4e00\u89a7\u3092json\u5f62\u5f0f\u306b\u5909\u63db<\/h3>\n\n\n\n
  const posts = await res.json();<\/code><\/pre><\/div>\n\n\n\n
map\u95a2\u6570\u3092\u4f7f\u3063\u3066id\u53d6\u5f97<\/h3>\n\n\n\n
  return posts.map((post) => {\n    return {\n      params: {\n        id: String(post.id),\n      },\n    };\n  });<\/code><\/pre><\/div>\n\n\n\n
import fetch from "node-fetch";\n\n\/\/ Django API\u30b5\u30fc\u30d0\u30fcURL\nconst SERVERURL = "http:\/\/127.0.0.1:8000\/";\n\n\/\/ \u6295\u7a3f\u4e00\u89a7\u3092\u53d6\u5f97\nexport async function getAllPostsData() {\n  const res = await fetch(new URL(`${SERVERURL}api\/post\/`));\n  const posts = await res.json();\n  return posts;\n}\n\n\/\/ \u6295\u7a3f\u4e00\u89a7\u306eID\u3092\u53d6\u5f97\nexport async function getAllPostIds() {\n  const res = await fetch(new URL(`${SERVERURL}api\/post\/`));\n  const posts = await res.json();\n  return posts.map((post) => {\n    return {\n      params: {\n        id: String(post.id),\n      },\n    };\n  });\n}\n\n\/\/ \u6295\u7a3f\u8a73\u7d30\u3092\u53d6\u5f97\nexport async function getPostData(id) {\n  const res = await fetch(new URL(`${SERVERURL}api\/post\/${id}\/`));\n  const post = await res.json();\n  return post;\n}<\/code><\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"
Next.js\u306e\u30a4\u30f3\u30dd\u30fc\u30c8 tailwindcss\u306e\u30a4\u30f3\u30dd\u30fc\u30c8 layout.js \u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u3084\u30d5\u30c3\u30bf\u30fc\u306a\u3069\u306e\u30da\u30fc\u30b8\u3067\u5171\u901a\u306e\u90e8\u5206\u3092layout.js\u306b\u66f8\u304f\u3053\u3068\u306b\u306a\u308a\u307e\u3059\u3002 navigation.js \u8a73\u7d30\u30da\u30fc\u30b8 _a<\/p>\n","protected":false},"author":1,"featured_media":1722,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jin_ogp_image_url":"","_jin_last_featured_id":0,"footnotes":""},"categories":[40],"tags":[],"class_list":["post-1721","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-next-js"],"_links":{"self":[{"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/posts\/1721","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/agile-software.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1721"}],"version-history":[{"count":2,"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/posts\/1721\/revisions"}],"predecessor-version":[{"id":1747,"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/posts\/1721\/revisions\/1747"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/media\/1722"}],"wp:attachment":[{"href":"https:\/\/agile-software.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1721"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/agile-software.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1721"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/agile-software.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1721"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}