update to next 12

Author: zamiang

lib/notion.ts

@@ -4,14 +4,14 @@ const notion = new Client({
   auth: process.env.NOTION_TOKEN,
 });
 
-export const getDatabase = async (databaseId: string) => {
+export const getItemsFromDatabase = async (databaseId: string) => {
   const response = await notion.databases.query({
     database_id: databaseId,
   });
   return response.results;
 };
 
-export const getPage = async (pageId: string) => {
+export const getPageById = async (pageId: string) => {
   const response = await notion.pages.retrieve({ page_id: pageId });
   return response;
 };

package-lock.json

@@ -32,7 +32,7 @@
     "@types/react-router-dom": "5.3.2",
     "clsx": "1.1.1",
     "express": "4.17.1",
-    "next": "11.1.2",
+    "next": "12.0.0",
     "next-compose-plugins": "2.2.1",
     "next-fonts": "1.5.1",
     "next-secure-headers": "2.2.0",
@@ -50,7 +50,7 @@
     "@typescript-eslint/eslint-plugin-tslint": "5.2.0",
     "@typescript-eslint/parser": "5.2.0",
     "eslint": "8.1.0",
-    "eslint-config-next": "11.1.2",
+    "eslint-config-next": "12.0.0",
     "eslint-plugin-import": "2.25.2",
     "eslint-plugin-react": "7.26.1",
     "eslint-plugin-react-hooks": "4.2.0",

package.json

@@ -1,13 +1,13 @@
 import { Request, Response } from 'express';
-import { getDatabase } from '../../lib/notion';
+import { getItemsFromDatabase } from '../../lib/notion';
 import { postsDatabaseId } from '../index';
 
 const title = 'Articles by Brennan Moore';
 const description = 'todo';
 const baseUrl = 'https://www.zamaing.com/';
 
 const getRssXml = async () => {
-  const posts = await getDatabase(postsDatabaseId);
+  const posts = await getItemsFromDatabase(postsDatabaseId);
 
   const orderedPosts = posts
     .filter(

pages/api/rss.ts

@@ -1,10 +1,10 @@
 import { Request, Response } from 'express';
 import { SitemapStream, streamToPromise } from 'sitemap';
-import { getDatabase } from '../../lib/notion';
+import { getItemsFromDatabase } from '../../lib/notion';
 import { postsDatabaseId } from '../index';
 
 export default async (_req: Request, res: Response) => {
-  const posts = await getDatabase(postsDatabaseId);
+  const posts = await getItemsFromDatabase(postsDatabaseId);
 
   const smStream = new SitemapStream({
     hostname: 'https://www.kelp.nyc',

pages/api/sitemap.ts

@@ -6,7 +6,7 @@ import React from 'react';
 import { Text } from '../components/article/text';
 import Footer from '../components/homepage/footer';
 import Header from '../components/homepage/header';
-import { getDatabase } from '../lib/notion';
+import { getItemsFromDatabase } from '../lib/notion';
 import styles from './index.module.css';
 
 export const postsDatabaseId = process.env.NOTION_POSTS_DATABASE_ID!;
@@ -208,8 +208,8 @@ export default function Home(props: IProps) {
 }
 
 export const getStaticProps = async () => {
-  const posts = await getDatabase(postsDatabaseId);
-  const photos = await getDatabase(photosDatabaseId);
+  const posts = await getItemsFromDatabase(postsDatabaseId);
+  const photos = await getItemsFromDatabase(photosDatabaseId);
 
   return {
     props: {

pages/index.tsx

@@ -4,7 +4,7 @@ import React, { Fragment } from 'react';
 import { Text } from '../../components/article/text';
 import Footer from '../../components/homepage/footer';
 import Header from '../../components/homepage/header';
-import { getBlocks, getDatabase, getPageBySlug } from '../../lib/notion';
+import { getBlocks, getItemsFromDatabase, getPageBySlug } from '../../lib/notion';
 import { photosDatabaseId } from '../index';
 import styles from '../writing/writing.module.css';
 
@@ -100,7 +100,7 @@ export default function Post({ page, blocks }: Params) {
 }
 
 export const getStaticPaths = async () => {
-  const database = await getDatabase(photosDatabaseId);
+  const database = await getItemsFromDatabase(photosDatabaseId);
   const paths = database
     .map((post) => {
       const slug = (post.properties.Slug as any).rich_text[0]?.plain_text;

pages/photos/[id].tsx

@@ -3,7 +3,7 @@ import Head from 'next/head';
 import React from 'react';
 import Footer from '../../components/homepage/footer';
 import Header from '../../components/homepage/header';
-import { getDatabase } from '../../lib/notion';
+import { getItemsFromDatabase } from '../../lib/notion';
 import { PhotosGrid, photosDatabaseId } from '../index';
 import styles from '../index.module.css';
 
@@ -46,7 +46,7 @@ export default function Home(props: IProps) {
 }
 
 export const getStaticProps = async () => {
-  const photos = await getDatabase(photosDatabaseId);
+  const photos = await getItemsFromDatabase(photosDatabaseId);
 
   return {
     props: {

pages/photos/index.tsx

@@ -5,7 +5,8 @@ import { renderBlock } from '../../components/article/render-article-block';
 import { Text } from '../../components/article/text';
 import Footer from '../../components/homepage/footer';
 import Header from '../../components/homepage/header';
-import { getBlocks, getDatabase, getPageBySlug } from '../../lib/notion';
+import { getBlocks, getItemsFromDatabase, getPageBySlug } from '../../lib/notion';
+import Custom404 from '../404';
 import { PostsList, postsDatabaseId } from '../index';
 import styles from './writing.module.css';
 
@@ -15,7 +16,7 @@ export type Block = Params['blocks'][0];
 
 export default function Post({ page, blocks, posts }: Params) {
   if (!page || !blocks) {
-    return <div />;
+    return <Custom404 />;
   }
   const excerpt = (page.properties.Excerpt as any).rich_text[0]?.plain_text;
   const title = (page.properties.Title as any).title[0].plain_text;
@@ -60,7 +61,7 @@ export default function Post({ page, blocks, posts }: Params) {
 }
 
 export const getStaticPaths = async () => {
-  const database = await getDatabase(postsDatabaseId);
+  const database = await getItemsFromDatabase(postsDatabaseId);
   const paths = database
     .map((post) => {
       const slug = (post.properties.Slug as any).rich_text[0]?.plain_text;
@@ -77,7 +78,7 @@ export const getStaticPaths = async () => {
 
 export const getStaticProps = async (context: { params: { id: string } }) => {
   const { id } = context.params;
-  const posts = await getDatabase(postsDatabaseId);
+  const posts = await getItemsFromDatabase(postsDatabaseId);
   const page = await getPageBySlug(id, postsDatabaseId);
   const blocks = await getBlocks(page.id);
 

pages/writing/[id].tsx

@@ -3,7 +3,7 @@ import Head from 'next/head';
 import React from 'react';
 import Footer from '../../components/homepage/footer';
 import Header from '../../components/homepage/header';
-import { getDatabase } from '../../lib/notion';
+import { getItemsFromDatabase } from '../../lib/notion';
 import { PostsList, postsDatabaseId } from '../index';
 import styles from '../index.module.css';
 
@@ -53,7 +53,7 @@ export default function Home(props: IProps) {
 }
 
 export const getStaticProps = async () => {
-  const posts = await getDatabase(postsDatabaseId);
+  const posts = await getItemsFromDatabase(postsDatabaseId);
 
   return {
     props: {