Next.jsとContentfulを統合する

動機

元々このサイトはNuxtJSで構築していたが、TaiwindCSSのHeadlessUIが使いたいので、NextJSでブログを構築してみる。（NuxtJSのVue3対応は楽しみ。）あと、NextJSはTypeScriptのサポートや最近のAPIサービスのチュートリアルが充実しているので楽しみ。
また、CSSの独自実装が増えると管理が大変だったので、極力Tailwind一本にしたい。デザイン(CSSを含む)の知識がない中で、悩みながら実装するとかなり時間がかかるし、汚いコードが生成される。諦めてCSS Framworkに任せて、本当に実装したいデザインなどは腰を据えて取り組んだ方が良さそう。

やること

• Contentfulと統合
• TailwindCSSと統合
• Google Analyticsと統合
• Vercelにデプロイ

※TypeScriptとテスト関連も後々入れてみたい。

Pagesの構成

• /index.js
• /page/[page].js
• /tag/[slug]/index.js
• /tag/[slug]/page/[page].js
• /category/[slug].index.js
• /category/[slug]/page/[page].js
• /[slug].js

NextJSとContentfulの統合

• Next.jsとContentfulを統合する

@/lib/contentful.js

const contentful = require("contentful")
const config = {
  space: process.env.CONTENTFUL_SPACE,
  accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
}
const client = contentful.createClient(config)
export default client

import client from '@/lib/contentful'

export async function getStaticProps() {
  await client.getEntries({
    content_type: 'post'
  })
  ...
}

• Getting Started with Contentful and JavaScript

next/linkを使う

import Link from 'next/link'

function Home() {
  return (
    <Link href={article.slug}>
    　　<a>Home</a>
    </Link>
  )
}

• next/link

getStaticPaths()

Pre Rendering(SSG)で生成する必要のあるページはこの関数を使用する。ビルド時に実行される。

export async function getStaticPaths() {
}

getStaticProps()

こちらもビルド時に実行される。おそらくgetStaticPathsで取得したPATHからparamsをどんどん取得していくんだと思う。

export async function getStaticProps() {
}

Objects are not valid as a React child

Objects are not valid as a React child

下記のような形でobjectを表示しようとしていたら、エラーが発生した。ちゃんとarticle .fields.titleで表示したら直った。

function Article({ article }) {
  return (
    <div>{article}</div>
  )
}

• Next.jsを使用したMarkdown / MDX

NextJS markdown

remarkjs/react-markdownを使用する。Dynamic Routesも参考にした。

/* Use `…/dist/cjs/…` if you’re not in ESM! */
// import {dark} from 'react-syntax-highlighter/dist/esm/styles/prism'
import {dark} from 'react-syntax-highlighter/dist/cjs/styles/prism'

react-syntax-highlighter/dist/cjs/styles/prismを覗くとめちゃめちゃあった。node_modules/react-syntax-highlighter/dist/cjs/styles/prism/index.jsにexportが記載されているので、色々importしてみる。

ex) vscDarkPlus

• PrismJS examples

お気に入りPrismJSテーマのメモ

自分で設定してみても面白そう。

• nord
• materialOceanic
• materialLight: darkmodeの場合など
• materialDark
• dracula
• coldarkDark: かなり見やすい
• coldarkCold
• atomDark
• tomorrow

あと、コピー、行数、ファイル名、タブも実装してみたい。

[object Object]

コンポーネントのルートの要素に困ったときに使っている。

function SomePage() {
  return (
    <>
    </>
  )
}

Sassの導入

sass-support

npm install sass

next.config.jsにsassコンパイラの設定を書く。

ESLintとPrettierのインストール

• Setting up ESLint and Prettier For Your Next.js Project

モバイルのレスポンシブ

• width100% + paddingの部分が適用されるのでかくつく

remについて

HTMLタグのfont-sizeを基準として動く。

可愛いサイトを見つけた

• frendly

NetlifyにGoogle Analyticsしたままだったら。。。

Google検索で表示されなかった。スマホだと表示されていた。Netlifyのサイトを消したら表示できた。

感想

TailwindCSS使ったら実装早くなる。あと　Next.js×Vercel早いし、楽ちんやで。