How I developed this blog (Next.js and notion)

I develop this blog by Next.js, and I use notion as editor of the blog. The structure is really simple. Next.js server calls notion API to get posts information from the notion table. The below image is my memo before coding.

https://rich-shirt-24b.notion.site/How-I-developed-this-blog-Next-js-and-notion-a115cba1b20c4f6ca9d0001719f793f7

Contents

1. Why Next.js

2. Why Notion

3. React Notion X

4. Code

5. Reflections

1. Why Next.js

2. Why Notion

3. React Notion X

4. Code

compornents/notion/index.tsx

export const getPosts = async ( databaseId: string) => {
	const response = await notion.databases.query({
		database_id: databaseId,
	})
	const { results } = response

	let posts = results.map((result:any) => {
		const d = result.properties
		
		// ~~Add slug if it is empty~~

		const item:any = {
			id: result.id,
			url: result.url,
			slug: '',
			title: '',
			date: '',
			edited: result.last_edited_time,
			published: false,
			hashtags: [],
			recordMap: {},
		}
		
		Object.keys(d).forEach((key) => {
			// https://github.com/masaishi/notion-blog/blob/main/compornents/notion/index.tsx~~Converting data into a form that fits the form~~
		})

	// ~~Add date if it is empty~~

	posts = posts.filter((post): post is Post => typeof post !== 'undefined');
	// Sort database by date.
	posts.sort((a, b) => b!.date - a!.date);

	return posts
}

// Get page detail
export const getPage = async (pageId: string) => {
  const page = await notionApi.getPage(pageId);
  return page
}

export const updateProperties = async (pageId: string, properties: any) => {
	const response = await notion.pages.update({
    page_id: pageId,
    properties,
  });
}

export const getHashtags = async () => {
	const response = await notion.databases.query({
		database_id: process.env.NOTION_DATABASE_ID ?? '',
	})
	const { results } = response as any

	let hashtags:Hashtag[] = []
	for(const result of results){
		const d = result.properties! as any
		for(const select of d.Hashtags.multi_select) {
			if(!hashtags.filter(hashtag => hashtag.name == select.name).length){
				hashtags.push({'name':select.name, 'color':select.color, 'count':1})
			}else{
				hashtags.filter(hashtag => hashtag.name == select.name)[0].count += 1
			}
		}
		
	}
	hashtags = hashtags.sort((a, b) => b.count - a.count);
	return hashtags
}

Notion APIで自分のポートフォリオサイトを作ってみた

Notionのbeta版のパブリックAPIで現時点でどこまでのことができるか試してみるため、自分のポートフォリオサイトを実際にNotion APIで作ってみました。 この記事ではNotion APIの使い方と、どのようにポートフォリオサイトを作ったかをご紹介したいと思います。 実際に完成したポートフォリオサイトはこちら こちらはその元となっているNotionのページになります。 使用技術は以下のようになります。最近自分の中でNext.jsとTypeScriptは切っても切れない技術になってきてます。 また、@notionhq/client というNotionが公式で提供しているnpmライブラリを使うことで簡単に記事データを取得することができました。 Notionにてデータベースを作る NotionにてSecret KeyとデータベースIDを取得する @notionhq/clientを使って自分のNotionからデータを取得し描画する まずはNotionにてデータベースを作りましょう。/table と入力するとテーブルブロックが作成できますが、これがデータベースに当たります。 次に実際にデータを作っていきます。私の場合は以下のようなプロパティを用意しました。 Page ポートフォリオのタイトル Slug ポートフォリオを表示する際のURLに使用 Published ポートフォリオを表示するかどうか Date ポートフォリオの日付 Authors この記事を書いた人 Thumbnail 記事のサムネイル Description ポートフォリオの簡単な説明 次にNotionにてSecret KeyとデータベースIDを取得します。 まずはSecret Keyを取得しましょう。 NotionのページよりSettings & Members → Integrations → Develop your own integrationsの順に移動していただき、新しいIntegrationを作成することでSecret Keyを取得できます。 次に先ほど作成したテーブルに対して作成したintegrationを招待します。 Notionのの右上にあるShareボタンをクリックし表示されるポップオーバーにて、Inviteより作成したintegrationを招待してください 次にデータベースIDを取得します。 テーブルのページは以下のようなURLになっていて、 ***************** の部分がデータベースIDになるので控えておきます。 最後に@notionhq/client を使って実際にNotionからデータを取得して描画してみましょう。 まずは以下のようにnotionに接続するClientを作ります。 一覧ページ 控えておいたデータベースIDを使って対象のテーブルからレコードを取得します。 かなり雑ですが取得できたデータを以下のような関数で加工して一覧データとして扱いやすい形に変換しています。 最終的にNext.jsで getStaticProps を使って以下のようなイメージでISRで一覧ページを表示しています。 詳細ページ また対象のページのデータを以下のようにClientから取得できます。 対象ページのブロック一覧も以下のようにClientから取得できます。 当ポートフォリオサイトでは各記事のブロック一覧を以下のようにReactとTailwindCSSで表示しています。 @notionhq/client を使えばTypeScriptで書いてにデータベースから取得したデータの型情報を調べることができ、開発体験はとてもよかったです。 ただし、2021年11月6日現在では、まだデータ的に情報が足りていないブロックもいくつかあり、本格的なものを作るにはもう少し待ちたいなと思いました。 テキストや見出し、リスト、画像を使った簡単なブログなら現時点でも十分に作れそうなことがわかりました。 実際のポートフォリオサイトのソースコードはこちらです。 コードはかなり雑ですがご容赦ください。

https://zenn.dev/steelydylan/articles/portfolio-with-notion-api

pages/index.tsx

{show_posts.map((post:Post) => (
	<div className="card mt-5" key={post.id}>
	  <PostContent post={post} />
  </div>
))}

import React from 'react'
import Head from 'next/head'
import Image from 'next/image'
import Link from 'next/link'
import styles from '../styles/Home.module.css'

import { NotionRenderer } from 'react-notion-x'

import { Post } from '../notion/postType'

export const PostContent = ({post}:{post:Post}) => {
  return (
		<div className="card-body" key={`${post.id}_content`}>
			<div className='notion light-mode notion-page notion-block'>
				<div className="card-title d-flex align-items-center">
					<div className="profile align-items-center">
						<Link href={`/posts/${post.slug}`}>
							<a className="h2 mb-0 notion-link" id={`${post.id}_title`}>{post.title}</a>
						</Link>
					</div>
				</div>
				<h6 className="card-subtitle mb-2 text-muted" id={`${post.id}_published_at`}>posted_at: {new Date(post.date ?? '').toLocaleString()}</h6>
				<h6 className="card-subtitle mb-2 text-muted" id={`${post.id}_edited_at`}>edited_at:  {new Date(post.edited).toLocaleString()}</h6>
				<div className="d-flex">
					{post.hashtags?.map((hashtag) => {
						return (
							<div key={`${post.id}_${hashtag}`} className="me-3">
								<Link href={`/?hashtags=${hashtag}`}>
									<p className="h6 mb-0 notion-link">#{hashtag}</p>
								</Link>
							</div>
						)
					})}
				</div>
			</div>
			
			<div className="card-text mt-4 post-content contents-texts">
			{/* <div className="card-text post-content contents-texts" id={`${post.id}_contents`}> */}
				<NotionRenderer recordMap={post.recordMap} fullPage={false} darkMode={false} />
			</div>
		</div>
	)
}

5. Reflections