Next.js + Typescript + MicroCms로 기술 블로그 만들기

전치

평상시의 일에서는, Java를 메인으로서 엔지니어를 하고 있으므로, 휴일이나 틈새 시간을 이용해, 프런트 엔드의 지식을 Input하고 있습니다.
※지나지 않는 부분도 많이 있다고 생각합니다만, 잘 부탁드립니다.

그 중, Output를 위해서, 자신의 날마다 공부한 일등을 발신하기 위한, 기술 블로그를 작성하려고 생각했습니다.

기술 스택

Next

TypeScript

tailwindCss

MicroCms

소스는 이하(github). 막히면 참조하십시오.

그럼 환경 구축부터 시작하겠습니다.

1. 환경 구축

Next.js 프로젝트 작성, TypeScript, TailwindCss 도입
※Next의 프로젝트와 Tailwind의 인스톨을 한번에 할 수 있는 커멘드가 있으므로, 이쪽에서 작성해 갑시다.

// create next.js project
// my-project部分を、ご自身に合わせて名前を変えて下さい。
npx create-next-app -e with-tailwindcss my-project

// typeScript install
# npmを使用している方は、こちら
npm install --save-dev typescript @types/react @types/node

# yarnを使用している方は、こちら
yarn add --dev typescript @types/react @types/node

cd プロジェクト名
touch tsconfig.json

// ここまでで、一度ローカル環境を立ち上げてみましょう。
yarn dev

문제없이 시작할 수 있으면 괜찮습니다. 현재의 디렉토리 구성은 이미지와 같다고 생각합니다.



디렉터리 구성이 복잡해지더라도 괜찮 듯이 src 디렉터리를 만들고 그곳에 넣습니다.

mkdir src &&　mv pages/ src/pages &　mv styles/ src/styles

tailwind.config.js를 변경한 디렉토리 구성에 맞게 수정합니다.

module.exports = {
  mode: 'jit',
  purge: [
// こちらを修正してください。
    './src/pages/**/*.{js,ts,jsx,tsx}',
    './src/components/**/*.{js,ts,jsx,tsx}',
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

tsconfig.json

{
  "compilerOptions": {
 // javascriptファイルへコンパイルされる時の形式を指定
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
// ファイルを探しに行く際の開始地点を指定します。
    "baseUrl": "./",
// ｊｓファイルのインポートを許容します
    "allowJs": true,
// 型定義ファイルのチェックをスキップします。
    "skipLibCheck": true,
// 型チェックの挙動を有効化
    "strict": true,
// TypeScript はプログラムがディスク上の大文字小文字と異なるファイルをインクルードしようとした場合にエラーを発生させます。
    "forceConsistentCasingInFileNames": true,
// JavaScript ソースコード、ソースマップ、型定義のファイルを出力しないようにします。
    "noEmit": true,
// すべてのインポートに対して Namespace オブジェクトを生成することによって、
// CommonJS と ES Modules 間で相互運用可能なコードを出力します。
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

prettier/eslint 설정

// prettierのインストール
    yarn add -D prettier
    touch .prettierrc.js
作成した、構成ファイルに以下を記載して下さい。

// .prettierrc.js
module.exports = {
  semi: false,
  arrowParens: 'always',
  singleQuote: true,
}


// eslintのインストール
yarn add -D eslint eslint-plugin-react \
              eslint-config-prettier eslint-plugin-prettier \
          @typescript-eslint/parser @typescript-eslint/eslint-plugin
touch .eslintrc.js

구성 파일에 다음을 입력하십시오.

// .eslintrc.js
module.exports = {
  ignorePatterns: ['!.eslintrc.js', '!.prettierrc.js'],
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:@typescript-eslint/eslint-recommended',
    'plugin:prettier/recommended',
    'prettier/prettier',
    'prettier',
  ],
  plugins: ['@typescript-eslint', 'react', 'prettier'],
  parser: '@typescript-eslint/parser',
  env: {
    browser: true,
    node: true,
    es6: true,
    jest: true,
  },
  parserOptions: {
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
  },
  settings: {
    react: {
      version: 'detect',
    },
  },
  rules: {
    'react/prop-types': 'off',
    'react/react-in-jsx-scope': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
    'prettier/prettier': 'error',
    'no-tabs': ['error', { allowIndentationTabs: true }],
  },
}

다음으로 _app.js , index.js를 TypeScript로 다시 작성해 보겠습니다. 먼저 각각의 파일 확장자를 tsx로 변경합시다.

app.js → app.tsx

index.js → index.tsx

// app.tsx
import 'tailwindcss/tailwind.css'
import React from 'react'
import { AppProps } from 'next/app'

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

export default MyApp

// index.tsx
import Head from 'next/head'
import React from 'react'

export default function Home(): JSX.Element {
  return ( ~ここは、変更無し。

지금까지 한 번 로컬 환경을 시작합시다. 문제없이 시작할 수 있으면 OK입니다.

yarn dev

2.MicroCms 도입

공식 제공 microcms-js-sdk를 설치합니다.

yarn add microcms-js-sdk
※MicroCms의 셋업에 대해서는, 공식 사이트를 참조하면서, API의 작성까지는, 각자로 가 주세요.

환경 변수를 설정합니다.

프로젝트의 최상위 디렉토리에 .env.development.local을 만듭니다. (API 미리보기에서 확인할 수 있습니다.)

NEXT_PUBLIC_SERVICE_DOMAIN = "xxxxxx" (https://xxxxxxx.microcms.~のxxxx部分)
NEXT_PUBLIC_API_KEY = "xxxxxxxxxxxxxx"

그런 다음 src 아래에 libs라는 폴더를 만들고 거기에 client.js를 만듭니다.
여기에 createClient라는 API를 가져오고 API_KEY, SERVER_DOMAIN을 이용하여 데이터를 검색하는 기능을 설명합니다.

// src/libs/client.js

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

export const client = createClient({
  serviceDomain: process.env.NEXT_PUBLIC_SERVICE_DOMAIN,
  apiKey: process.env.NEXT_PUBLIC_API_KEY,
})

목록 페이지를 작성합니다. index.tsx를 여십시오.

// src/page/index.tsx

import Head from 'next/head'
import React from 'react'
import { client } from '../libs/client'

interface Article {
  id: string
  title: string
  publishedAt: string
}

interface Contents {
  contents: Article[]
}

export default function Home({
  blog,
}: {
  blog: { id: string; title: string; publishedAt: string }[]
}): JSX.Element {
  return (
    <div className="flex flex-col items-center justify-center min-h-screen py-2">
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <div>
        <ul>
          {blog.map((blog) => (
            <li key={blog.id}>
              <p>{blog.title}</p>
            </li>
          ))}
        </ul>
      </div>
    </div>
  )
}

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

이와 같이, 당신이 투고한 블로그의 기사의 타이틀이 전건 취득 할 수 있다고 생각합니다. (공개하는 기사에 한함)
각 상세 페이지에 대해서는, src/page/blog/[id].tsx라고 말하는 느낌으로, 다이나믹 라우팅을 이용해 하면, 구현할 수 있네요.

이번은, 여기까지로 합니다. 수고하셨습니다! ! !

PreviewMode의 구현, 각 블로그 페이지에 대해서도, 향후 비잊어, 써 갑니다.

「참고 문서」
· htps // // 천. 에서 v / 히가 / 아르치 c㎇ s / d7bf3460이다 fb1734에 f43 # 15.ー%에7%92%B0%에5%아2%83%에5% 오 % 오 0

· htps : // 전. 에서 v / 히로 08gh / 아르치 ぇs / 아 953f46 아 839 예 7

· htps //w w. ty psc pt ぁ g. 오 rg / 자 / ts 곤후 g # s ki p ぃ b 치 ck

· htps : // 두쿠멘 t. micro cms. 이오 / 쓰리 아 l / 네 xt / 네 xt-p