{"id":1531,"date":"2021-08-01T20:59:02","date_gmt":"2021-08-01T11:59:02","guid":{"rendered":"http:\/\/www.agile-software.site\/?p=1531"},"modified":"2022-05-12T01:36:52","modified_gmt":"2022-05-11T16:36:52","slug":"nextjs_tailwind_hp","status":"publish","type":"post","link":"https:\/\/agile-software.net\/?p=1531","title":{"rendered":"next.js_tailwindcss[hp]"},"content":{"rendered":"\n

\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u4f5c\u6210<\/h2>\n\n\n\n
npx create-next-app . --use-npm<\/code><\/pre><\/div>\n\n\n\n
tailwindcss\u306e\u8a2d\u5b9a<\/h2>\n\n\n\n
 tailwindcss \u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/h3>\n\n\n\n
npm i tailwindcss<\/code><\/pre><\/div>\n\n\n\n
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest<\/code><\/pre><\/div>\n\n\n\n
npx tailwindcss init -p<\/code><\/pre><\/div>\n\n\n\n
 tailwind.config.js\u306e\u5909\u66f4<\/h3>\n\n\n\n
'.\/pages\/**\/*.{js,ts,jsx,tsx}', '.\/components\/**\/*.{js,ts,jsx,tsx}'<\/code><\/pre><\/div>\n\n\n\n
<\/div>\n
\u5404pages\u306b\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8<\/p>\n<\/div>\n\n\n\n
pages\u306e_app.js\u306b\u30a4\u30f3\u30dd\u30fc\u30c8\u3059\u308b<\/p>\n\n\n\n
import 'tailwindcss\/tailwind.css'<\/code><\/pre><\/div>\n\n\n\n
styles\u306eglobals.css\u306b\u30a4\u30f3\u30dd\u30fc\u30c8\u3059\u308b<\/p>\n\n\n\n
@tailwind base;\n@tailwind components;\n@tailwind utilities;<\/code><\/pre><\/div>\n\n\n\n
Home.module.css<\/h3>\n\n\n\n
tailwindcss\u306b\u3088\u3063\u3066css\u3092\u8a18\u8ff0\u3059\u308b\u306e\u3067\u3001 Home.module.css \u3068index.js\u306b\u8a18\u8ff0\u3055\u308c\u3066\u3044\u308bimport\u6587\u3092\u524a\u9664\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
index.js<\/div>\n
http:\/\/localhost:3000\u306b\u30a2\u30af\u30bb\u30b9\u3057\u305f\u3068\u304d\u306b\u8868\u793a\u3055\u308c\u308b\u5185\u5bb9\u3092\u8a18\u8ff0<\/p>\n<\/div>\n\n\n\n
\u30d5\u30a1\u30a4\u30eb\u4f5c\u6210<\/h3>\n\n\n\n
pages>api\u306bblog-page.js\u3068contact-page.js<\/p>\n\n\n\n
const Contact = () => {\n    return (\n        <div>\n            Contact page\n        <\/div>\n    )\n}\n\nexport default Contact<\/code><\/pre><\/div>\n\n\n\n
const Blog = () => {\n    return (\n        <div>\n            Blog page\n        <\/div>\n    )\n}\n\nexport default Blog<\/code><\/pre><\/div>\n\n\n\n
Layout component<\/h2>\n\n\n\n
comonents\u30d5\u30a9\u30eb\u30c0\u3092\u4f5c\u6210\u3057Layout.js\u30d5\u30a1\u30a4\u30eb
props\u3067\u6e21\u3055\u308c\u305ftitle\u306e\u5024\u3092\u52d5\u7684\u306b<\/p>\n\n\n\n
Head\u30bf\u30b0\u3067\u306f index.js\u306b\u8a18\u8ff0\u3055\u308c\u3066\u3044\u308btitle=”Home”\u304cc <\/p>\n\n\n\n
main\u30bf\u30b0\u3067\u306findex.js\u306b\u8a18\u8ff0\u3055\u308c\u3066\u3044\u308b<p>\u30bf\u30b0\u306e\u5185\u5bb9\u304cchildren\u306b\u6e21\u3055\u308c\u3066\u305d\u306e\u53d7\u3051\u53d6\u3063\u305f\u5024\u3092\u51fa\u529b\u3057\u3066\u3044\u307e\u3059\u3002
<\/p>\n\n\n\n
export<\/div>\n
\u3053\u308c\u3092\u3064\u3051\u308b\u3068\u3001\u5225\u306e\u30d5\u30a1\u30a4\u30eb\u304b\u3089\u547c\u3073\u51fa\u305b\u308b<\/p>\n<\/div>\n\n\n\n
children<\/div>\n
Layout\u306e children<\/code> \u306b\u306f <Layout><\/code> \u3068 <\/Layout><\/code> \u3067\u56f2\u307e\u308c\u305f\u90e8\u5206\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u304c\u5165\u3063\u3066\u304d\u307e\u3059\u3002<\/p>\n<\/div>\n\n\n\n
  \nimport Head from "next\/head";\nimport Link from "next\/link";\nimport Image from 'next\/image'\n\nexport default function Layout({ children, title = "HP by Nextjs" }) {\n  return (\n    <div className="flex justify-center items-center flex-col min-h-screen text-gray-600 text-sm font-mono">\n      <Head>\n        <title>{title}<\/title>\n      <\/Head>\n      <header>\n        <nav className="bg-gray-800 w-screen">\n          <div className="flex items-center pl-8 h-14">\n            <div className="flex space-x-4">\n              <Link href="\/">\n                <a className="text-gray-300 hover:bg-gray-700 px-3 py-2 rounded">\n                  Home\n                <\/a>\n              <\/Link>\n              <Link href="\/blog-page">\n                <a className="text-gray-300 hover:bg-gray-700 px-3 py-2 rounded">\n                  Blog\n                <\/a>\n              <\/Link>\n              <Link href="\/contact-page">\n                <a className="text-gray-300 hover:bg-gray-700 px-3 py-2 rounded">\n                  Contact\n                <\/a>\n              <\/Link>\n            <\/div>\n          <\/div>\n        <\/nav>\n      <\/header>\n      <main className="flex flex-1 justify-center items-center flex-col w-screen">\n        {children}\n      <\/main>\n      <footer className="w-full h-12 flex justify-center items-center border-t">\n        <a\n          className="flex items-center"\n          href="https:\/\/vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"\n          target="_blank"\n          rel="noopener noreferrer"\n        >\n          Powered by{" "}\n          {\/* <img src="\/vercel.svg" alt="Vercel Logo" className="h-4 ml-2" \/> *\/}\n          <Image src="\/vercel.svg" alt="Vercel Logo" width={72} height={16} \/>\n        <\/a>\n      <\/footer>\n    <\/div>\n  );\n}<\/code><\/pre><\/div>\n\n\n\n
index.js<\/h3>\n\n\n\n
\u4f5c\u6210\u3057\u305fLayout.js\u3092index.js\u306b\u9069\u7528\u3055\u305b\u308b\u305f\u3081\u306bimport\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
import Layout from "..\/components\/Layout";\nexport default function Home() {\n  return (\n    <Layout title="Home">\n      <p className="text-4xl">Welcome to Nextjs<\/p>\n    <\/Layout>\n  );\n}<\/code><\/pre><\/div>\n\n\n\n
Blog page<\/h2>\n\n\n\n
import Layout from "..\/components\/Layout";\nimport Post from "..\/components\/Post";\nimport { getAllPostsData } from "..\/lib\/posts";\n\nexport default function Blog({ posts }) {\n  return (\n    <Layout title="Blog">\n      <ul className="m-10">\n        {posts && posts.map((post) => <Post key={post.id} post={post} \/>)}\n      <\/ul>\n    <\/Layout>\n  );\n}\n\nexport async function getStaticProps() {\n  const posts = await getAllPostsData();\n  return {\n    props: { posts },\n  };\n}<\/code><\/pre><\/div>\n\n\n\n
Contact page<\/h2>\n\n\n\n
public\u30d5\u30a9\u30eb\u30c0\u30fc\u306bsvg\u30d5\u30a1\u30a4\u30eb\u306a\u3069\u3092\u683c\u7d0d
Image\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u81ea\u52d5\u7684\u306b\u753b\u50cf\u306e\u5727\u7e2e<\/p>\n\n\n\n
import Layout from "..\/components\/Layout";\nimport Image from "next\/image";\n\nexport default function Contact() {\n  return (\n    <Layout title="Contact">\n      <div className="bg-white text-center shadow-xl p-8 w-80 rounded">\n        <div className="mt-4">\n          <p className="font-bold">Contant info<\/p>\n        <\/div>\n        <div className="flex justify-center mt-4">\n          <Image\n            className="rounded-full"\n            src="\/avatar.jpg"\n            width={60}\n            height={60}\n            alt="Avatar"\n          \/>\n        <\/div>\n        <div className="mt-4">\n          <p className="font-bold">Address<\/p>\n          <p className="text-xs mt-2 text-gray-600">city A<\/p>\n          <p className="font-bold mt-3">E-mail<\/p>\n          <p className="text-xs mt-2 text-gray-600">abc@gmail.com<\/p>\n          <p className="font-bold mt-3">Phone<\/p>\n          <p className="text-xs mt-2 text-gray-600">000-123-456<\/p>\n        <\/div>\n        <div className="mt-6 flex justify-around">\n          <div>\n            <a\n              href="https:\/\/nerdcave.com\/tailwind-cheat-sheet"\n              target="_blank"\n              rel="noopener noreferrer"\n            >\n              <svg\n                className="w-6 h-6 mr-3 text-blue-500"\n                stroke="currentColor"\n                fill="currentColor"\n                viewBox="0 0 512 512"\n                xmlns="http:\/\/www.w3.org\/2000\/svg"\n              >\n                <path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"><\/path>\n              <\/svg>\n            <\/a>\n          <\/div>\n          <div>\n            <a\n              href="https:\/\/nerdcave.com\/tailwind-cheat-sheet"\n              target="_blank"\n              rel="noopener noreferrer"\n            >\n              <svg\n                className="w-6 h-6 mr-3 text-blue-700"\n                fill="currentColor"\n                viewBox="0 0 24 24"\n                xmlns="http:\/\/www.w3.org\/2000\/svg"\n              >\n                <path d="M22.675 0h-21.35c-.732 0-1.325.593-1.325 1.325v21.351c0 .731.593 1.324 1.325 1.324h11.495v-9.294h-3.128v-3.622h3.128v-2.671c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12v9.293h6.116c.73 0 1.323-.593 1.323-1.325v-21.35c0-.732-.593-1.325-1.325-1.325z" \/>\n              <\/svg>\n            <\/a>\n          <\/div>\n          <div>\n            <a\n              href="https:\/\/nerdcave.com\/tailwind-cheat-sheet"\n              target="_blank"\n              rel="noopener noreferrer"\n            >\n              <svg\n                className="w-6 h-6 mr-3 text-gray-500"\n                fill="currentColor"\n                viewBox="0 0 512 512"\n                xmlns="http:\/\/www.w3.org\/2000\/svg"\n              >\n                <path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"><\/path>\n              <\/svg>\n            <\/a>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/Layout>\n  );\n}<\/code><\/pre><\/div>\n\n\n\n
getStaticProps<\/h2>\n\n\n\n
<\/div>\n
npm run dev:\u30ea\u30af\u30a8\u30b9\u30c8\u3054\u3068\u306b\u5b9f\u884c\u3055\u308c\u308b<\/p>\n\n\n\n
npm start:\u30d3\u30eb\u30c9\u6642\u306b\u5b9f\u884c\u3055\u308c\u308b<\/p>\n<\/div>\n\n\n\n
json\u306e\u5f62\u5f0f\u3067posts\u306b\u683c\u7d0d<\/p>\n\n\n\n
lib>posts.js<\/h3>\n\n\n\n
  • getAllPostIds():id\u306e\u4e00\u89a7\u3092\u53d6\u5f97<\/li>
  • getPostData:\u7279\u5b9a\u306eid\u3092\u4f7f\u3063\u3066\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u304b\u3089\u30d3\u30eb\u30c9\u6642\u306b\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3059\u308b<\/li><\/ul>\n\n\n\n
    import fetch from "node-fetch";\n\nconst apiUrl = "https:\/\/jsonplaceholder.typicode.com\/posts";\n\nexport async function getAllPostsData() {\n  const res = await fetch(new URL(apiUrl));\n  const posts = await res.json();\n  return posts;\n}\n\nexport async function getAllPostIds() {\n  const res = await fetch(new URL(apiUrl));\n  const posts = await res.json();\n\n  return posts.map((post) => {\n    return {\n      params: {\n        id: String(post.id),\n      },\n    };\n  });\n}\n\nexport async function getPostData(id) {\n  const res = await fetch(new URL(`${apiUrl}\/${id}\/`));\n  const post = await res.json();\n  \/\/ return {\n  \/\/   post,\n  \/\/ };\n  return post;\n}<\/code><\/pre><\/div>\n\n\n\n
    Post.js<\/h3>\n\n\n\n
    \u30d6\u30ed\u30b0\u306e\u4e00\u89a7\u304b\u3089\u8a73\u7d30\u306b\u98db\u3076\u305f\u3081\u306e\u30ea\u30f3\u30af\u3092\u4f5c\u6210\u3002<\/p>\n\n\n\n
    import Link from "next\/link";\nexport default function Post({ post }) {\n  return (\n    <div>\n      <span>{post.id}<\/span>\n      {" : "}\n      <Link href={`\/posts\/${post.id}`}>\n        <span className="cursor-pointer text-blue-500 border-b border-blue-500 hover:bg-gray-200">\n          {post.title}\n        <\/span>\n      <\/Link>\n    <\/div>\n  );\n}<\/code><\/pre><\/div>\n\n\n\n
    Dynamic routes<\/h2>\n\n\n\n
    <\/div>\n
    1. getStaticPath()<\/li>
    2. <\/li><\/ol>\n<\/div>\n\n\n\n
      pages>posts\u306e\u30d5\u30a9\u30eb\u30c0\u3092\u4f5c\u6210\u3057\u305d\u306e\u30d5\u30a9\u30eb\u30c0\u5185\u306b[id].js\u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210<\/p>\n\n\n\n
      posts>[id].js<\/h2>\n\n\n\n
      import Link from "next\/link";\nimport Layout from "..\/..\/components\/Layout";\nimport { getAllPostIds, getPostData } from "..\/..\/lib\/posts";\n\nexport default function Post({ post }) {\n  if (!post) {\n    return <div>Loading...<\/div>;\n  }\n\n  return (\n    <Layout title={post.title}>\n      <p className="m-4">\n        {"ID : "}\n        {post.id}\n      <\/p>\n      <p className="mb-8 text-xl font-bold">{post.title}<\/p>\n      <p className="px-10">{post.body}<\/p>\n      <Link href="\/blog-page">\n        <div className="flex cursor-pointer mt-12">\n          <svg\n            className="w-6 h-6 mr-3"\n            fill="currentColor"\n            viewBox="0 0 20 20"\n            xmlns="http:\/\/www.w3.org\/2000\/svg"\n          >\n            <path\n              fillRule="evenodd"\n              d="M15.707 15.707a1 1 0 01-1.414 0l-5-5a1 1 0 010-1.414l5-5a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 010 1.414zm-6 0a1 1 0 01-1.414 0l-5-5a1 1 0 010-1.414l5-5a1 1 0 011.414 1.414L5.414 10l4.293 4.293a1 1 0 010 1.414z"\n              clipRule="evenodd"\n            ><\/path>\n          <\/svg>\n          <span>Back to blog-page<\/span>\n        <\/div>\n      <\/Link>\n    <\/Layout>\n  );\n}\n\nexport async function getStaticPaths() {\n  const paths = await getAllPostIds();\n\n  return {\n    paths,\n    fallback: false,\n  };\n}\nexport async function getStaticProps({ params }) {\n  \/\/const { post: post } = await getPostData(params.id);\n  const post = await getPostData(params.id);\n  return {\n    props: {\n      post,\n    },\n  };\n}<\/code><\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"
      \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u4f5c\u6210 tailwindcss\u306e\u8a2d\u5b9a tailwindcss \u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb tailwind.config.js\u306e\u5909\u66f4 pages\u306e_app.js\u306b\u30a4\u30f3\u30dd\u30fc\u30c8\u3059\u308b styles\u306eglobals.css\u306b\u30a4\u30f3\u30dd<\/p>\n","protected":false},"author":1,"featured_media":1564,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jin_ogp_image_url":"","_jin_last_featured_id":0,"footnotes":""},"categories":[39,40],"tags":[],"class_list":["post-1531","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-django-rest-framework","category-next-js"],"_links":{"self":[{"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/posts\/1531","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=1531"}],"version-history":[{"count":3,"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/posts\/1531\/revisions"}],"predecessor-version":[{"id":1877,"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/posts\/1531\/revisions\/1877"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/media\/1564"}],"wp:attachment":[{"href":"https:\/\/agile-software.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1531"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/agile-software.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1531"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/agile-software.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1531"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}