Next.jsとContentfulを統合する

ツイート
2021年05月14日
2021年05月18日

動機

元々このサイトは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の統合

@/lib/contentful.js

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
js
import client from '@/lib/contentful' export async function getStaticProps() { await client.getEntries({ content_type: 'post' }) ... }

next/linkを使う

js
import Link from 'next/link' function Home() { return ( <Link href={article.slug}>   <a>Home</a> </Link> ) }

getStaticPaths()

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

js
export async function getStaticPaths() { }

getStaticProps()

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

js
export async function getStaticProps() { }

Objects are not valid as a React child

Objects are not valid as a React child

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

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

NextJS markdown

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

js
/* 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テーマのメモ

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

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

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

[object Object]

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

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

Sassの導入

sass-support

bash
npm install sass

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

ESLintとPrettierのインストール

モバイルのレスポンシブ

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

remについて

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

可愛いサイトを見つけた

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

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

感想

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