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

Last Update: Finally, I’ve decided to abandon the Next.js Notion starter kit for my website. Instead, I recommend trying out the solution of Notion + Elog + Hexo. It allows for easy DIY and offers better page speed. I’ll write an article to introduce it next time!

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.

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

[file](https://drive.google.com/file/d/17AQFkbqJVH53DGIKYGZBHGTH1w6Rgpzu/view)

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.