Fixed the broken search in nextjs-notion-starter-kit

Fixed the broken search in nextjs-notion-starter-kit

Tags
Next.js
React
Tech
Notion Blog
BugFix
Published
October 17, 2023
Author

Reputation

Thanks to @Travis Fischer for bringing us this awesome project that combines Next.js and Notion. It makes building a custom website quite simple.

Reason

If your nextjs-notion-starter-kit version is v2.0.0 or below, like my project is v2.0.0, you’ll find your search function is broken. This is because of the search API params was changed by Notion.
 
💡
As the pic shows, param sort turned String into an Object.
notion image
 
Although the guy @Armster15 fixed this problem in the Project’s dependency react-notion-x@6.16.1 , but the npm version is still v6.16.0 until 17/10/2023.
 

Solve

We can not simply update the dependency version to solve this problem, I believe the author will fixed the issue in the future. but currently we need a hotfix. The way is quite simple:
 
1.find a package called patch-package in npm, and install it.
//npm npm i patch-package --legacy-peer-deps //yarn yarn add patch-package
 
2.add a post-install hook in package.json, like this
{ "name": "nextjs-notion-starter-kit", "version": "2.0.0", "private": true, "description": "The perfect starter kit for building beautiful websites with Next.js and Notion.", "author": "Travis Fischer <travis@transitivebullsh.it>", "repository": "transitive-bullshit/nextjs-notion-starter-kit", "license": "MIT", "engines": { "node": ">=16" }, "scripts": { "postinstall": "patch-package", // <== look here, add this one only. "dev": "next dev", "build": "next build", "start": "next start",
 
3.download the patch file and put it into your project dir /patches , as the pic shows.

Download The Patch File

File on Google Drive
File on Google Drive
 
notion image
 
4.Run npm i --legacy-peer-deps again, the patches will apply to the node_modules.
 
5.Test the your project in development, it works.
notion image
 

Comments