Merge pull request #174 from otoyo/nextjs-13_2

Migrate Nextjs 13.2

app/blog/[slug]/page.tsx

@@ -1,5 +1,9 @@
+import type { Metadata } from 'next'
 import { redirect } from 'next/navigation'
-import { NEXT_PUBLIC_URL } from '../../server-constants'
+import {
+  NEXT_PUBLIC_URL,
+  NEXT_PUBLIC_SITE_TITLE,
+} from '../../server-constants'
 import { Post } from '../../../lib/notion/interfaces'
 import GoogleAnalytics from '../../../components/google-analytics'
 import {
@@ -26,6 +30,38 @@ import {
 
 export const revalidate = 30
 
+export async function generateMetadata({ params }): Promise<Metadata> {
+  const post = await getPostBySlug(params.slug)
+  const title = `${post?.Title} - ${NEXT_PUBLIC_SITE_TITLE}`
+  const description = post?.Excerpt
+  const url = NEXT_PUBLIC_URL ? new URL(getBlogLink(post?.Slug || ''), NEXT_PUBLIC_URL) : undefined
+  const imageURL = new URL(`/api/og-image?slug=${post?.Slug}`, NEXT_PUBLIC_URL)
+
+  const metadata: Metadata = {
+    title: title,
+    description: description,
+    openGraph: {
+      title: title,
+      description: description,
+      url: url,
+      siteName: title,
+      type: 'website',
+      images: [{url: imageURL}],
+    },
+    twitter: {
+      card: 'summary_large_image',
+      title: title,
+      description: description,
+      images: [{url: imageURL}],
+    },
+    alternates: {
+      canonical: url,
+    },
+  }
+
+  return metadata
+}
+
 export async function generateStaticParams() {
   const posts = await getAllPosts()
   return posts.map(p => ({ slug: p.Slug }))

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

@@ -1,5 +1,11 @@
+import type { Metadata } from 'next'
 import { notFound } from 'next/navigation'
-import { NUMBER_OF_POSTS_PER_PAGE } from '../../../../app/server-constants'
+import {
+  NEXT_PUBLIC_URL,
+  NEXT_PUBLIC_SITE_TITLE,
+  NEXT_PUBLIC_SITE_DESCRIPTION,
+  NUMBER_OF_POSTS_PER_PAGE,
+} from '../../../../app/server-constants'
 import GoogleAnalytics from '../../../../components/google-analytics'
 import {
   getRankedPosts,
@@ -22,6 +28,37 @@ import styles from '../../../../styles/blog.module.css'
 
 export const revalidate = 3600
 
+export async function generateMetadata({ params: { date: encodedDate } }): Promise<Metadata> {
+  const date = decodeURIComponent(encodedDate)
+  const title = `Post before ${date.split('T')[0]} - ${NEXT_PUBLIC_SITE_TITLE}`
+  const description = NEXT_PUBLIC_SITE_DESCRIPTION
+  const url = NEXT_PUBLIC_URL ? new URL('/blog', NEXT_PUBLIC_URL) : undefined
+  const imageURL = new URL('/default.png', NEXT_PUBLIC_URL)
+
+  const metadata: Metadata = {
+    title: title,
+    openGraph: {
+      title: title,
+      description: description,
+      url: url,
+      siteName: title,
+      type: 'website',
+      images: [{url: imageURL}],
+    },
+    twitter: {
+      card: 'summary_large_image',
+      title: title,
+      description: description,
+      images: [{url: imageURL}],
+    },
+    alternates: {
+      canonical: url,
+    },
+  }
+
+  return metadata
+}
+
 const BlogBeforeDatePage = async ({ params: { date: encodedDate } }) => {
   const date = decodeURIComponent(encodedDate)
 

app/blog/page.tsx

@@ -1,4 +1,10 @@
-import { NUMBER_OF_POSTS_PER_PAGE } from '../../app/server-constants'
+import type { Metadata } from 'next'
+import {
+  NEXT_PUBLIC_URL,
+  NEXT_PUBLIC_SITE_TITLE,
+  NEXT_PUBLIC_SITE_DESCRIPTION,
+  NUMBER_OF_POSTS_PER_PAGE,
+} from '../../app/server-constants'
 import GoogleAnalytics from '../../components/google-analytics'
 import {
   BlogPostLink,
@@ -21,6 +27,36 @@ import {
 
 export const revalidate = 60
 
+export async function generateMetadata(): Promise<Metadata> {
+  const title = `Blog - ${NEXT_PUBLIC_SITE_TITLE}`
+  const description = NEXT_PUBLIC_SITE_DESCRIPTION
+  const url = NEXT_PUBLIC_URL ? new URL('/blog', NEXT_PUBLIC_URL) : undefined
+  const imageURL = new URL('/default.png', NEXT_PUBLIC_URL)
+
+  const metadata: Metadata = {
+    title: title,
+    openGraph: {
+      title: title,
+      description: description,
+      url: url,
+      siteName: title,
+      type: 'website',
+      images: [{url: imageURL}],
+    },
+    twitter: {
+      card: 'summary_large_image',
+      title: title,
+      description: description,
+      images: [{url: imageURL}],
+    },
+    alternates: {
+      canonical: url,
+    },
+  }
+
+  return metadata
+}
+
 const BlogPage = async () => {
   const [posts, firstPost, rankedPosts, tags] = await Promise.all([
     getPosts(NUMBER_OF_POSTS_PER_PAGE),

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

@@ -1,5 +1,11 @@
+import type { Metadata } from 'next'
 import { notFound } from 'next/navigation'
-import { NUMBER_OF_POSTS_PER_PAGE } from '../../../../../../app/server-constants'
+import {
+  NEXT_PUBLIC_URL,
+  NEXT_PUBLIC_SITE_TITLE,
+  NEXT_PUBLIC_SITE_DESCRIPTION,
+  NUMBER_OF_POSTS_PER_PAGE,
+} from '../../../../../../app/server-constants'
 import GoogleAnalytics from '../../../../../../components/google-analytics'
 import { colorClass } from '../../../../../../components/notion-block'
 import {
@@ -25,6 +31,38 @@ import '../../../../../../styles/notion-color.css'
 
 export const revalidate = 3600
 
+export async function generateMetadata({ params: { date: encodedDate, tag: encodedTag } }): Promise<Metadata> {
+  const date = decodeURIComponent(encodedDate)
+  const tag = decodeURIComponent(encodedTag)
+  const title = `Posts in ${tag} before ${date.split('T')[0]} - ${NEXT_PUBLIC_SITE_TITLE}`
+  const description = NEXT_PUBLIC_SITE_DESCRIPTION
+  const url = NEXT_PUBLIC_URL ? new URL('/blog', NEXT_PUBLIC_URL) : undefined
+  const imageURL = new URL('/default.png', NEXT_PUBLIC_URL)
+
+  const metadata: Metadata = {
+    title: title,
+    openGraph: {
+      title: title,
+      description: description,
+      url: url,
+      siteName: title,
+      type: 'website',
+      images: [{url: imageURL}],
+    },
+    twitter: {
+      card: 'summary_large_image',
+      title: title,
+      description: description,
+      images: [{url: imageURL}],
+    },
+    alternates: {
+      canonical: url,
+    },
+  }
+
+  return metadata
+}
+
 const BlogTagBeforeDatePage = async ({ params: { tag: encodedTag, date: encodedDate } }) => {
   const tag = decodeURIComponent(encodedTag)
   const date = decodeURIComponent(encodedDate)

app/blog/tag/[tag]/page.tsx

@@ -1,5 +1,11 @@
+import type { Metadata } from 'next'
 import { notFound } from 'next/navigation'
-import { NUMBER_OF_POSTS_PER_PAGE } from '../../../../app/server-constants'
+import {
+  NEXT_PUBLIC_URL,
+  NEXT_PUBLIC_SITE_TITLE,
+  NEXT_PUBLIC_SITE_DESCRIPTION,
+  NUMBER_OF_POSTS_PER_PAGE,
+} from '../../../../app/server-constants'
 import GoogleAnalytics from '../../../../components/google-analytics'
 import {
   BlogPostLink,
@@ -24,6 +30,37 @@ import '../../../../styles/notion-color.css'
 
 export const revalidate = 60
 
+export async function generateMetadata({ params: { tag: encodedTag } }): Promise<Metadata> {
+  const tag = decodeURIComponent(encodedTag)
+  const title = `Posts in ${tag} - ${NEXT_PUBLIC_SITE_TITLE}`
+  const description = NEXT_PUBLIC_SITE_DESCRIPTION
+  const url = NEXT_PUBLIC_URL ? new URL('/blog', NEXT_PUBLIC_URL) : undefined
+  const imageURL = new URL('/default.png', NEXT_PUBLIC_URL)
+
+  const metadata: Metadata = {
+    title: title,
+    openGraph: {
+      title: title,
+      description: description,
+      url: url,
+      siteName: title,
+      type: 'website',
+      images: [{url: imageURL}],
+    },
+    twitter: {
+      card: 'summary_large_image',
+      title: title,
+      description: description,
+      images: [{url: imageURL}],
+    },
+    alternates: {
+      canonical: url,
+    },
+  }
+
+  return metadata
+}
+
 export async function generateStaticParams() {
   const tags = await getAllTags()
   return tags.map(tag => ({ tag: tag.name }))

app/layout.tsx

@@ -1,9 +1,18 @@
+import {
+  NEXT_PUBLIC_SITE_TITLE,
+  NEXT_PUBLIC_SITE_DESCRIPTION,
+} from './server-constants'
 import Header from '../components/header'
 import Footer from '../components/footer'
 import '../styles/global.css'
 import '../styles/syntax-coloring.css'
 import styles from '../styles/shared.module.css'
 
+export const metadata = {
+  title: NEXT_PUBLIC_SITE_TITLE,
+  description: NEXT_PUBLIC_SITE_DESCRIPTION,
+}
+
 const RootLayout = ({
   children,
 }: {

app/page.tsx

@@ -1,8 +1,42 @@
+import type { Metadata } from 'next'
 import Link from 'next/link'
-import { NEXT_PUBLIC_SITE_TITLE } from './server-constants'
+import {
+  NEXT_PUBLIC_URL,
+  NEXT_PUBLIC_SITE_TITLE,
+  NEXT_PUBLIC_SITE_DESCRIPTION
+} from './server-constants'
 import GoogleAnalytics from '../components/google-analytics'
 import styles from '../styles/page.module.css'
 
+export async function generateMetadata(): Promise<Metadata> {
+  const title = NEXT_PUBLIC_SITE_TITLE
+  const description = NEXT_PUBLIC_SITE_DESCRIPTION
+  const url = NEXT_PUBLIC_URL ? new URL(NEXT_PUBLIC_URL) : undefined
+  const imageURL = new URL('/default.png', NEXT_PUBLIC_URL)
+
+  const metadata: Metadata = {
+    openGraph: {
+      title: title,
+      description: description,
+      url: url,
+      siteName: title,
+      type: 'website',
+      images: [{url: imageURL}],
+    },
+    twitter: {
+      card: 'summary_large_image',
+      title: title,
+      description: description,
+      images: [{url: imageURL}],
+    },
+    alternates: {
+      canonical: url,
+    },
+  }
+
+  return metadata
+}
+
 const RootPage = () => (
   <>
     <GoogleAnalytics pageTitle={NEXT_PUBLIC_SITE_TITLE} />

next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.