Next.js + TypeScript + VercelでJamstackなブログを作る その1 - 環境構築/記事の作成・表示

{
  "name": "YOUR APP NAME",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "9.5.3",
    "react": "16.13.1",
    "react-dom": "16.13.1"
  }
}

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "baseUrl": "./",
        "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

{
  "semi": false,
  "trailingComma": "all",
  "singleQuote": true,
  "printWidth": 100,
  "tabWidth": 2,
  "arrowParens": "avoid"
}

{
  "root": true,
  "plugins": ["react"],
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:prettier/recommended",
    "prettier/@typescript-eslint"
  ],

  "parser": "@typescript-eslint/parser",
  "env": {
    "es2020": true
  },
  "parserOptions": {
    "project": ["./tsconfig.json"]
  },
  "rules": {
    "react/react-in-jsx-scope": "off",
    "react/prop-types": "off",
    "@typescript-eslint/explicit-module-boundary-types": "off"
  }
}

import { NextPage } from 'next'

const Index: NextPage = () => {
  return <h1>Awesome BLOG</h1>
}

export default Index

import { NextPage } from 'next'
import styles from './index.module.css'

const Index: NextPage = () => {
  return <h1 className={styles.heading}>Awesome BLOG</h1>
}

export default Index

.heading {
  padding: 16px;
  color: steelblue;
  font-size: 24px;
  font-weight: bold;
}

import { AppProps } from 'next/app'

import 'minireset.css'

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

import { NextPage } from 'next'

type Props = {
  title: string
  content: string
}

const Post: NextPage<Props> = ({ title, content }) => {
  return (
    <>
      <h1>{title}</h1>
      <p>{content}</p>
    </>
  )
}

export default Post

import { GetStaticPaths } from 'next'

...

export const getStaticPaths: GetStaticPaths = async () => {
  return {
    paths: [
      { params: { id: '1' } },
      { params: { id: '2' } },
    ],
    fallback: false
  }
}

import { GetStaticPaths, GetStaticProps } from 'next'

...

const dummyData = {
  1: {
    title: 'id1のtitle',
    content: 'id1のcontext',
  },
  2: {
    title: 'id2のtitle',
    content: 'id2のcontext',
  },
}

export const getStaticProps: GetStaticProps = async ({ params }) => {
  const props: Props = dummyData[params!.id as '1' | '2']
  return { props }
}

---
title: '坊っちゃん'
---

親譲おやゆずりの無鉄砲むてっぽうで小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰こしを抜ぬかした事がある。なぜそんな無闇むやみをしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談じょうだんに、いくら威張いばっても、そこから飛び降りる事は出来まい。弱虫やーい。と囃はやしたからである。小使こづかいに負ぶさって帰って来た時、おやじが大きな眼めをして二階ぐらいから飛び降りて腰を抜かす奴やつがあるかと云いったから、この次は抜かさずに飛んで見せますと答えた。  

親類のものから西洋製のナイフを貰もらって奇麗きれいな刃はを日に翳かざして、友達ともだちに見せていたら、一人が光る事は光るが切れそうもないと云った。切れぬ事があるか、何でも切ってみせると受け合った。そんなら君の指を切ってみろと注文したから、何だ指ぐらいこの通りだと右の手の親指の甲こうをはすに切り込こんだ。幸さいわいナイフが小さいのと、親指の骨が堅かたかったので、今だに親指は手に付いている。しかし創痕きずあとは死ぬまで消えぬ。  

庭を東へ二十歩に行き尽つくすと、南上がりにいささかばかりの菜園があって、真中まんなかに栗くりの木が一本立っている。これは命より大事な栗だ。実の熟する時分は起き抜けに背戸せどを出て落ちた奴を拾ってきて、学校で食う。菜園の西側が山城屋やましろやという質屋の庭続きで、この質屋に勘太郎かんたろうという十三四の倅せがれが居た。勘太郎は無論弱虫である。弱虫の癖くせに四つ目垣を乗りこえて、栗を盗ぬすみにくる。ある日の夕方折戸おりどの蔭かげに隠かくれて、とうとう勘太郎を捕つらまえてやった。その時勘太郎は逃にげ路みちを失って、一生懸命いっしょうけんめいに飛びかかってきた。向むこうは二つばかり年上である。弱虫だが力は強い。鉢はちの開いた頭を、こっちの胸へ宛あててぐいぐい押おした拍子ひょうしに、勘太郎の頭がすべって、おれの袷あわせの袖そでの中にはいった。邪魔じゃまになって手が使えぬから、無暗に手を振ふったら、袖の中にある勘太郎の頭が、右左へぐらぐら靡なびいた。しまいに苦しがって袖の中から、おれの二の腕うでへ食い付いた。痛かったから勘太郎を垣根へ押しつけておいて、足搦あしがらをかけて向うへ倒たおしてやった。山城屋の地面は菜園より六尺がた低い。勘太郎は四つ目垣を半分崩くずして、自分の領分へ真逆様まっさかさまに落ちて、ぐうと云った。勘太郎が落ちるときに、おれの袷の片袖がもげて、急に手が自由になった。その晩母が山城屋に詫わびに行ったついでに袷の片袖も取り返して来た。

# /posts/sample-post-02.md
---
title: '吾輩は猫である'
---

吾輩わがはいは猫である。名前はまだ無い。  

どこで生れたかとんと見当けんとうがつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪どうあくな種族であったそうだ。この書生というのは時々我々を捕つかまえて煮にて食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌てのひらに載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始みはじめであろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶やかんだ。その後ご猫にもだいぶ逢あったがこんな片輪かたわには一度も出会でくわした事がない。のみならず顔の真中があまりに突起している。そうしてその穴の中から時々ぷうぷうと煙けむりを吹く。どうも咽むせぽくて実に弱った。これが人間の飲む煙草たばこというものである事はようやくこの頃知った。  

この書生の掌の裏うちでしばらくはよい心持に坐っておったが、しばらくすると非常な速力で運転し始めた。書生が動くのか自分だけが動くのか分らないが無暗むやみに眼が廻る。胸が悪くなる。到底とうてい助からないと思っていると、どさりと音がして眼から火が出た。それまでは記憶しているがあとは何の事やらいくら考え出そうとしても分らない。

import fs from 'fs'
import path from 'path'
import matter from 'gray-matter'
import unified from 'unified'
import markdown from 'remark-parse'
import remark2rehype from 'remark-rehype'
import stringify from 'rehype-stringify'

const POSTS_DIRECTORIES = path.join(process.cwd(), 'posts')

type MatterResult = {
  content: string
  data: {
    title: string
  }
}

export type Post = {
  content: string
  title: string
}

// 全てのpostのid一覧を取得
export function getAllPostIds() {
  const fileNames = fs.readdirSync(POSTS_DIRECTORIES)
  return fileNames.map(fileName => {
    return fileName.replace(/\.md$/, '')
  })
}

// idからpostを取得する
export async function getPostData(id: string): Promise<Post> {
  const fullPath = path.join(POSTS_DIRECTORIES, `${id}.md`)
  const fileContent = fs.readFileSync(fullPath, 'utf8')
  const matterResult = matter(fileContent)
  const matterResultData = matterResult.data as MatterResult['data']

  const processedContent = await unified()
    .use(markdown)
    .use(remark2rehype)
    .use(stringify)
    .process(matterResult.content)
  const content = processedContent.toString()

  return {
    content,
    ...matterResultData,
  }
}

import { GetStaticPaths, GetStaticProps, InferGetStaticPropsType } from 'next'
import { getPostData, getAllPostIds, Post } from '@/lib/posts'

export const getStaticPaths: GetStaticPaths = async () => {
  const ids = await getAllPostIds()
  return {
    paths: ids.map(id => ({ params: { id } })),
    fallback: false,
  }
}

export const getStaticProps: GetStaticProps<Post, { id: string }> = async context => {
  const data = await getPostData((context.params || {}).id as string)
  return { props: data }
}

const PostPage = ({ title, content }: InferGetStaticPropsType<typeof getStaticProps>) => {
  return (
    <>
      <h1>{title}</h1>
      <div dangerouslySetInnerHTML={{ __html: content }} />
    </>
  )
}

export default PostPage

---
id: 'bocchan'
title: '坊っちゃん'
---

...

...

type MatterResult = {
  content: string
  data: {
    id: string
    title: string
  }
}

export type Post = {
  content: string
  id: string
  title: string
}

// 全てのpostのidとfileNameの一覧を取得
export function getAllPostIdAndFileNames() {
  const fileNames = fs.readdirSync(POSTS_DIRECTORIES)
  return fileNames.map(fileName => {
    const fullPath = path.join(POSTS_DIRECTORIES, fileName)
    const fileContent = fs.readFileSync(fullPath, 'utf8')
    const matterResult = matter(fileContent)
    const matterResultData = matterResult.data as MatterResult['data']
    return {
      id: matterResultData.id,
      fileName: fileName.replace(/\.md$/, ''),
    }
  })
}

// idからpostを取得する
export async function getPostData(fileName: string): Promise<Post> {
  const fullPath = path.join(POSTS_DIRECTORIES, `${fileName}.md`)
  
  ...
}

...

import { getPostData, getAllPostIdAndFileNames, Post } from '@/lib/posts'

export const getStaticPaths: GetStaticPaths = async () => {
  const idAndFileNames = await getAllPostIdAndFileNames()
  return {
    paths: idAndFileNames.map(idAndFileName => ({
      params: idAndFileName,
    })),
    fallback: false,
  }
}

export const getStaticProps: GetStaticProps<Post, { id: string, fileName: string }> = async context => {
  const data = await getPostData((context.params || {}).fileName as string)
  return { props: data }
}

...

...

const POSTS_DIRECTORIES = path.join(process.cwd(), 'posts')
const ID_FILENAME_MAP = (() => {
  const map = new Map()
  const fileNames = fs.readdirSync(POSTS_DIRECTORIES)
  fileNames.forEach(fileName => {
    const fullPath = path.join(POSTS_DIRECTORIES, fileName)
    const fileContent = fs.readFileSync(fullPath, 'utf8')
    const matterResult = matter(fileContent)
    const matterResultData = matterResult.data as MatterResult['data']
    map.set(matterResultData.id, fileName.replace(/\.md$/, ''))
  })
  return map
})()

type MatterResult = {
  content: string
  data: {
    id: string
    title: string
  }
}

export type Post = {
  content: string
  id: string
  title: string
}

// 全てのpostのid一覧を取得
export function getAllPostIds() {
  return Array.from(ID_FILENAME_MAP.keys())
}

// idからpostを取得する
export async function getPostData(id: string): Promise<Post> {
  const fullPath = path.join(POSTS_DIRECTORIES, `${ID_FILENAME_MAP.get(id)}.md`)
  
  ...
}