❯ npx create-next-app@latest
✔ What is your project named? … hogehoge
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias? … No / Yes
Creating a new Next.js app in /Users/itokosuke/projects/github.com/Kosuke-Ito/kosuke-hp.

Using npm.

Initializing project with template: app-tw

Installing dependencies:
- react
- react-dom
- next
- tailwindcss
- postcss
- autoprefixer
- eslint
- eslint-config-next

kosuke ito

Zennの記事を取得

kosuke ito

画像を良い感じに配置する

kosuke ito

Fontを適当に入れてみる

Vercelが作成したGeist というフォントが流れてきたので、試しに入れてみた

https://vercel.com/font?ref=dailydev

- error ../hoeghoge/node_modules/geist/dist/font.js:1
import localFont from "@next/font/local";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1178:20)
    at Module._compile (node:internal/modules/cjs/loader:1220:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
    at Module.load (node:internal/modules/cjs/loader:1119:32)
    at Module._load (node:internal/modules/cjs/loader:960:12)
    at Module.require (node:internal/modules/cjs/loader:1143:19)
    at require (node:internal/modules/cjs/helpers:121:18)
    at geist/font

import文がモジュールの外部で使用されているために発生した。
geistパッケージのfont.jsファイルがESモジュールとして扱われていたため。

Next.jsは、デフォルトでサーバーサイドのコードをCommonJS形式で扱うらしい。
しかし、geistパッケージのfont.jsはESモジュール形式で書かれているため、この問題が発生したようです。

next-transpile-modulesというパッケージを使用して、geistパッケージをトランスパイルすることができる。

$ npm install next-transpile-modules

次に、next.config.js（またはnext.config.cjs）を以下のように更新します。

const withTM = require('next-transpile-modules')(['geist']);

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: {
    formats: ['image/avif', 'image/webp'],
  },
}

module.exports = withTM({nextConfig})

これにより、Next.jsはgeistパッケージをトランスパイルし、import文を解釈することができた。

kosuke ito

notionをブログのCMSとして活用する

Notion API（ディベロッパー向けページ）でmy integrationを作成する

データベースを作成したページにコネクトする

curlでAPIを叩く例が多いですが、Next.jsでサイトを作成しているのでライブラリがないか探していたら、notion-sdkがあったので、それを使用します。

.env.local

NOTION_SECRET=hogehogefugafuga
NOTION_DATABASE_ID=foobarbuz

blogs.js

import notion from '../utils/notion';

export const getStaticProps = async () => {
  const response = await notion.databases.query({
    database_id: process.env.NOTION_DATABASE_ID
  });

  const notionBlogs = response.results.map(page => ({
    id: page.id,
    title: page.properties.title.title[0].text.content,
  }));

  return {
    props: {
      articles: notionBlogs,
    },
    revalidate: 60 * 60 * 24,
  }
}