Next.js + tailwind + microCMSを利用してJAMStackなブログを作る記録

$ npx create-next-app ~~アプリ名~~ --use-npm --typescript

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
It looks like you're trying to use TypeScript but do not have the required package(s) installed.

Please install @types/node by running:

	npm install --save-dev @types/node

If you are not trying to use TypeScript, please remove the tsconfig.json file from your package root (and any TypeScript files in your pages directory).

$ npm install --save-dev @types/node

$ npm run dev
> ~~アプリ名~~@0.1.0 dev
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
We detected TypeScript in your project and reconfigured your tsconfig.json file for you. Strict-mode is set to false by default.

The following suggested values were added to your tsconfig.json. These values can be changed to fit your project's needs:

	- incremental was set to true

event - compiled client and server successfully in 1520 ms (177 modules)

$ npm i -D tailwindcss postcss autoprefixer
$ npx tailwindcss init -p

module.exports = {
- content: [],
+ content: [
+  './pages/**/*.{js,ts,jsx,tsx}',
+  './components/**/*.{js,ts,jsx,tsx}',
+ ],
  theme: {
    extend: {},
  },
  plugins: [],
}

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

$ rm ./styles/Home.module.css 

import Head from 'next/head'
import Image from 'next/image'
- import styles from '../styles/Home.module.css'

export default function Home() {

import '../styles/globals.css'
+ import 'tailwindcss/tailwind.css'
import type { AppProps } from 'next/app'

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}
export default MyApp

$ rm -r ./pages/api/

$ npm i -D eslint eslint-config-next
$ touch .eslintrc

{
  "extends": ["next", "next/core-web-vitals"]
}

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
+ "lint": "next lint"
},

$ npm i -D prettier eslint-config-prettier
$ touch .prettierrc

{
-  "extends": ["next", "next/core-web-vitals"]
+  "extends": ["next", "next/core-web-vitals", "prettier"]
}

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
-  "lint": "next lint"
+  "lint": "next lint",
+  "format": "prettier --write './src/**/*.{js,jsx,ts,tsx,json,css}'"
},

$ mkdir src

$ tree -a -I 'node_modules|.next|.git'
.
├── .eslintrc
├── .gitignore
├── .prettierrc
├── README.md
├── next-env.d.ts
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   └── vercel.svg
├── src
│   ├── pages
│   │   ├── _app.tsx
│   │   └── index.tsx
│   └── styles
│       └── globals.css
├── tailwind.config.js
└── tsconfig.json

module.exports = {
  content: [
-    './pages/**/*.{js,ts,jsx,tsx}',
-    './components/**/*.{js,ts,jsx,tsx}',
+    './src/pages/**/*.{js,ts,jsx,tsx}',
+    './src/components/**/*.{js,ts,jsx,tsx}',
  ],

{
  "jsxSingleQuote": true,  // JSXはシングルクォートを使うように
  "semi": false // セミコロンなし
  "singleQuote": true, // JSX以外もシングルクォートを使うように
  "tabWidth": 2, // インデントは2
  "trailingComma": "es5", // オブジェクトや配列については末尾にコンマを付ける
}

$ mkdir ./src/components
$ touch ./src/components/Header.tsx
$ touch ./src/components/Footer.tsx

import Link from 'next/link'

const Header = () => {
  return (
    <header>
      <nav className="flex flex-rows bg-green-500 px-10 md:px-20 py-10 text-black font-bold text-2xl">
        <Link href='/'>
          <a>けいとくらふと情報局</a>
        </Link>
      </nav>
    </header>
  )
}

export default Header

const Footer = () => {
  return (
    <footer className='text-center text-sm bg-green-500 py-8'>
      <p>&copy;2022 katecraft.info</p>
    </footer>
  )
}

export default Footer

export default function Home() {
  return (
    <div>Hello World!</div>
  )
}

import '../styles/globals.css'
import 'tailwindcss/tailwind.css'
import Head from 'next/head'
import Header from '../components/Header'
import Footer from '../components/Footer'
import type { AppProps } from 'next/app'

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <Head>
        <title>けいとくらふと情報局</title>
      </Head>
      <Header />
      <Component {...pageProps} />
      <Footer />
    </>
  )
}
export default MyApp

import '../styles/globals.css'
import 'tailwindcss/tailwind.css'
import Head from 'next/head'
import Header from '../components/Header'
import Footer from '../components/Footer'
import type { AppProps } from 'next/app'

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <Head>
        <title>けいとくらふと情報局</title>
      </Head>
+      <div className='flex flex-col min-h-screen'>
        <Header />
+        <div className='m-10 md:m-20 grow'>
          <Component {...pageProps} />
+        </div>
        <Footer />
+      </div>
    </>
  )
}
export default MyApp

$ touch ./src/pages/_document.tsx

import { Html, Head, Main, NextScript } from 'next/document'

const MyDocument = () => {
  return (
    <Html lang='ja-JP'>
      <Head>
        <meta name='description' content='' />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

export default MyDocument

$ touch .env.development.local

APY_KEY=さっきコピーしたAPIキー
SERVICE_DOMAIN=サービスのドメイン名

$ npm i -D microcms-js-sdk

$ mkdir src/libs
$ touch src/libs/client.ts

import { createClient } from 'microcms-js-sdk'

export const client = createClient({
  serviceDomain: process.env.SERVICE_DOMAIN || '',
  apiKey: process.env.API_KEY || '',
})

$ mkdir src/types
$ touch src/types/blogs.ts

export type Eyecatch = {
  url: string
  height: number
  width: number
}

export type Category = {
  id: string
  createdAt: string
  updatedAt: string
  publishedAt: string
  revisedAt: string
  name: string
}

export type Blog = {
  id: string
  createdAt: string
  updatedAt: string
  publishedAt: string
  revisedAt: string
  title: string
  content: string
  eyecatch: Eyecatch
  category: Category
}

export type Blogs = {
  contents: Blog[]
  totalCount: number
  offset: number
  limit: number
}

import Link from 'next/link'
import { client } from '../libs/client'
import type { Blogs, Blog } from '../types/blogs'

type Props = {
  blogs: Blog[]
}

export default function Home({ blogs }: Props) {
  return (
    <div>
      <ul>
        {blogs.map((blog) => (
          <li key={blog.id}>
            <Link href={`/blogs/${blog.id}`}>
              <a>{blog.title}</a>
            </Link>
          </li>
        ))}
      </ul>
    </div>
  )
}

export const getStaticProps = async() => {
  const blogs: Blogs = await client.get({ endpoint: 'blogs' })
  return {
    props: {
      blogs: blogs.contents,
    }
  }
}

$ npx sb init
$ npm run storybook

$ touch src/stories/Footer.stories.tsx

import Footer from '../components/Footer'
import { ComponentMeta, ComponentStory } from '@storybook/react'

export default {
  title: 'Footer',
  component: Footer,
} as ComponentMeta<typeof Footer>

const Template: ComponentStory<typeof Footer> = () => <Footer />

export const Default: ComponentStory<typeof Footer> = Template.bind({})
Default.args = {}
Default.storyName = 'デフォルト'

$ npm i -D @storybook/addon-postcss

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
+    {
+      name: '@storybook/addon-postcss',
+      options: {
+        postcssLoaderOptions: {
+          implementation: require('postcss'),
+        },
+      },
    },
  ],
  "framework": "@storybook/react",
  "core": {
    "builder": "@storybook/builder-webpack5"
  }
}

+ import '../src/styles/globals.css'

export const parameters = {