🚀 Migration Next.js to 13

.gitignore

@@ -29,6 +29,7 @@ yarn-error.log*
 
 .now
 .vercel
+.vscode
 
 tmp/
 public/notion_images/*

__tests__/components/document-head.test.tsx

@@ -1,29 +1,33 @@
-import { render } from '@testing-library/react'
+import React from 'react';
+import { createRoot } from 'react-dom/client';
 import DocumentHead from '../../components/document-head'
 
-jest.mock('next/router', () => ({
-  useRouter() {
-    return {
-      asPath: '/',
-      pathname: '/',
-    }
-  },
-}))
-
 const mockNextPublicURL = jest.fn()
-jest.mock('../../lib/notion/server-constants', () => ({
+jest.mock('../../app/server-constants', () => ({
   get NEXT_PUBLIC_URL() {
     return mockNextPublicURL()
   },
 }))
 
+let container: Element
+
+beforeEach(() => {
+  container = document.createElement('div')
+  document.body.appendChild(container)
+})
+
+afterEach(() => {
+  document.body.removeChild(container);
+  container = null;
+})
+
 describe('DocumentHead', () => {
   describe('with NEXT_PUBLIC_URL', () => {
     mockNextPublicURL.mockReturnValue('http://localhost')
 
     it('renders the component', () => {
       expect(() => {
-        render(<DocumentHead />)
+        createRoot(container).render(<DocumentHead />)
       }).not.toThrow()
     })
   })
@@ -33,7 +37,7 @@ describe('DocumentHead', () => {
 
     it('renders the component', () => {
       expect(() => {
-        render(<DocumentHead />)
+        createRoot(container).render(<DocumentHead />)
       }).not.toThrow()
     })
   })

app/blog/[slug]/head.tsx

@@ -0,0 +1,19 @@
+import { NEXT_PUBLIC_URL } from '../../server-constants'
+import { getPostBySlug } from '../../../lib/notion/client'
+import { getBlogLink } from '../../../lib/blog-helpers'
+import DocumentHead from '../../../components/document-head'
+
+const BlogSlugHead = async ({ params: { slug } }) => {
+  const post = await getPostBySlug(slug)
+
+  return (
+    <DocumentHead
+      title={post.Title}
+      description={post.Excerpt}
+      path={getBlogLink(post.Slug)}
+      urlOgImage={NEXT_PUBLIC_URL && post.OGImage && new URL(`/api/og-image/${post.Slug}`, NEXT_PUBLIC_URL).toString()}
+    />
+  )
+}
+
+export default BlogSlugHead

app/blog/[slug]/page.tsx

@@ -0,0 +1,102 @@
+import { redirect } from 'next/navigation'
+import { NEXT_PUBLIC_URL } from '../../server-constants'
+import { Post } from '../../../lib/notion/interfaces'
+import GoogleAnalytics from '../../../components/google-analytics'
+import {
+  BlogPostLink,
+  BlogTagLink,
+  NoContents,
+  PostBody,
+  PostDate,
+  PostTags,
+  PostTitle,
+} from '../../../components/blog-parts'
+import SocialButtons from '../../../components/social-buttons'
+import styles from '../../../styles/blog.module.css'
+import { getBlogLink } from '../../../lib/blog-helpers'
+import {
+  getPosts,
+  getAllPosts,
+  getRankedPosts,
+  getPostBySlug,
+  getPostsByTag,
+  getAllTags,
+  getAllBlocksByBlockId,
+} from '../../../lib/notion/client'
+
+export const revalidate = 30
+// TODO: Enable after fixed https://github.com/vercel/next.js/issues/43357
+// export const dynamicParams = false
+
+export async function generateStaticParams() {
+  const posts = await getAllPosts()
+  return posts.map(p => ({ slug: p.Slug }))
+}
+
+const BlogSlugPage = async ({ params: { slug } }) => {
+  const post = await getPostBySlug(slug)
+
+  if (!post) {
+    console.log(`Failed to find post for slug: ${slug}`)
+    redirect('/blog')
+  }
+
+  const [
+    blocks,
+    rankedPosts,
+    recentPosts,
+    tags,
+    sameTagPosts,
+  ] = await Promise.all([
+    getAllBlocksByBlockId(post.PageId),
+    getRankedPosts(),
+    getPosts(5),
+    getAllTags(),
+    getPostsByTag(post.Tags[0], 6),
+  ])
+
+  const otherPostsHavingSameTag = sameTagPosts.filter((p: Post) => p.Slug !== post.Slug)
+
+  return (
+    <>
+      <GoogleAnalytics pageTitle={post.Title} />
+      <div className={styles.container}>
+        <div className={styles.mainContent}>
+          <div className={styles.post}>
+            <PostDate post={post} />
+            <PostTags post={post} />
+            <PostTitle post={post} enableLink={false} />
+
+            <NoContents contents={blocks} />
+            <PostBody blocks={blocks} />
+
+            <footer>
+              {NEXT_PUBLIC_URL && (
+                <SocialButtons
+                  title={post.Title}
+                  url={new URL(
+                    getBlogLink(post.Slug),
+                    NEXT_PUBLIC_URL
+                  ).toString()}
+                  id={post.Slug}
+                />
+              )}
+            </footer>
+          </div>
+        </div>
+
+        <div className={styles.subContent}>
+          <BlogPostLink
+            heading="Posts in the same category"
+            posts={otherPostsHavingSameTag}
+          />
+          <BlogPostLink heading="Recommended" posts={rankedPosts} />
+          <BlogPostLink heading="Latest posts" posts={recentPosts} />
+          <BlogTagLink heading="Categories" tags={tags} />
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default BlogSlugPage

app/blog/before/[date]/head.tsx

@@ -0,0 +1,11 @@
+import DocumentHead from '../../../../components/document-head'
+
+const BlogBeforeDateHead = async ({ params: { date: encodedDate } }) => {
+  const date = decodeURIComponent(encodedDate)
+
+  return (
+    <DocumentHead description={`Post before ${date.split('T')[0]}`} />
+  )
+}
+
+export default BlogBeforeDateHead

app/blog/before/[date]/page.tsx

@@ -0,0 +1,76 @@
+import { notFound } from 'next/navigation'
+import { NUMBER_OF_POSTS_PER_PAGE } from '../../../../app/server-constants'
+import GoogleAnalytics from '../../../../components/google-analytics'
+import {
+  getRankedPosts,
+  getPostsBefore,
+  getFirstPost,
+  getAllTags,
+} from '../../../../lib/notion/client'
+import {
+  BlogPostLink,
+  BlogTagLink,
+  NextPageLink,
+  NoContents,
+  PostDate,
+  PostExcerpt,
+  PostTags,
+  PostTitle,
+  ReadMoreLink,
+} from '../../../../components/blog-parts'
+import styles from '../../../../styles/blog.module.css'
+
+export const revalidate = 3600
+
+const BlogBeforeDatePage = async ({ params: { date: encodedDate } }) => {
+  const date = decodeURIComponent(encodedDate)
+
+  if (!Date.parse(date) || !/^\d{4}-\d{2}-\d{2}/.test(date)) {
+    notFound()
+  }
+
+  const [posts, firstPost, rankedPosts, tags] = await Promise.all([
+    getPostsBefore(date, NUMBER_OF_POSTS_PER_PAGE),
+    getFirstPost(),
+    getRankedPosts(),
+    getAllTags(),
+  ])
+
+  return (
+    <>
+      <GoogleAnalytics pageTitle={`Posts before ${date.split('T')[0]}`} />
+      <div className={styles.container}>
+        <div className={styles.mainContent}>
+          <header>
+            <h2>Posts before {date.split('T')[0]}</h2>
+          </header>
+
+          <NoContents contents={posts} />
+
+          {posts.map(post => {
+            return (
+              <div className={styles.post} key={post.Slug}>
+                <PostDate post={post} />
+                <PostTags post={post} />
+                <PostTitle post={post} />
+                <PostExcerpt post={post} />
+                <ReadMoreLink post={post} />
+              </div>
+            )
+          })}
+
+          <footer>
+            <NextPageLink firstPost={firstPost} posts={posts} />
+          </footer>
+        </div>
+
+        <div className={styles.subContent}>
+          <BlogPostLink heading="Recommended" posts={rankedPosts} />
+          <BlogTagLink heading="Categories" tags={tags} />
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default BlogBeforeDatePage

app/blog/head.tsx

@@ -0,0 +1,7 @@
+import DocumentHead from '../../components/document-head'
+
+const BlogHead = () => (
+  <DocumentHead title="Blog" path="/blog" />
+)
+
+export default BlogHead

app/blog/page.tsx

@@ -0,0 +1,65 @@
+import { NUMBER_OF_POSTS_PER_PAGE } from '../../app/server-constants'
+import GoogleAnalytics from '../../components/google-analytics'
+import {
+  BlogPostLink,
+  BlogTagLink,
+  NextPageLink,
+  NoContents,
+  PostDate,
+  PostExcerpt,
+  PostTags,
+  PostTitle,
+  ReadMoreLink,
+} from '../../components/blog-parts'
+import styles from '../../styles/blog.module.css'
+import {
+  getPosts,
+  getFirstPost,
+  getRankedPosts,
+  getAllTags,
+} from '../../lib/notion/client'
+
+export const revalidate = 60
+
+const BlogPage = async () => {
+  const [posts, firstPost, rankedPosts, tags] = await Promise.all([
+    getPosts(NUMBER_OF_POSTS_PER_PAGE),
+    getFirstPost(),
+    getRankedPosts(),
+    getAllTags(),
+  ])
+
+  return (
+    <>
+      <GoogleAnalytics pageTitle="Blog" />
+      <div className={styles.container}>
+        <div className={styles.mainContent}>
+          <NoContents contents={posts} />
+
+          {posts.map(post => {
+            return (
+              <div className={styles.post} key={post.Slug}>
+                <PostDate post={post} />
+                <PostTags post={post} />
+                <PostTitle post={post} />
+                <PostExcerpt post={post} />
+                <ReadMoreLink post={post} />
+              </div>
+            )
+          })}
+
+          <footer>
+            <NextPageLink firstPost={firstPost} posts={posts} />
+          </footer>
+        </div>
+
+        <div className={styles.subContent}>
+          <BlogPostLink heading="Recommended" posts={rankedPosts} />
+          <BlogTagLink heading="Categories" tags={tags} />
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default BlogPage

app/blog/tag/[tag]/before/[date]/head.tsx

@@ -0,0 +1,12 @@
+import DocumentHead from '../../../../../../components/document-head'
+
+const BlogTagBeforeDateHead = async ({ params: { tag: encodedTag, date: encodedDate } }) => {
+  const tag = decodeURIComponent(encodedTag)
+  const date = decodeURIComponent(encodedDate)
+
+  return (
+    <DocumentHead description={`Posts in ${tag} before ${date.split('T')[0]}`} />
+  )
+}
+
+export default BlogTagBeforeDateHead