Issues in using react-notion-x in NextJS (app structure).

[vule20]

trafficstars

Description

I keep getting errors while using react-notion-x for my NextJS app. In the app/component/NotionPage.tsx, I did included "use client" at the top of the file, however I still get mistakes like this

In addition, import { useRouter } from "next/route"; doesn't work too. When I changed it to import { useRouter } from "next/navigation", I solved the problem, however, the rendered content is not exactly same as Notion. Here's the output for my rendering

[Jessie-jzn]

这是一个常见的 TypeScript 错误，提示 prismjs 模块缺少类型声明。

1. 安装类型声明文件（如果存在）：

npm install --save-dev @types/prismjs

2. 手动添加模块声明文件： 在项目的根目录下创建一个global.d.ts文件，并在其中添加以下内容：

declare module "prismjs/components/prism-markup-templating.js";
declare module "prismjs/components/prism-markup.js";
declare module "prismjs/components/prism-bash.js";
declare module "prismjs/components/prism-c.js";
declare module "prismjs/components/prism-cpp.js";
declare module "prismjs/components/prism-csharp.js";
declare module "prismjs/components/prism-docker.js";
declare module "prismjs/components/prism-java.js";
declare module "prismjs/components/prism-js-templates.js";
declare module "prismjs/components/prism-coffeescript.js";
declare module "prismjs/components/prism-diff.js";
declare module "prismjs/components/prism-git.js";
declare module "prismjs/components/prism-go.js";
declare module "prismjs/components/prism-graphql.js";
declare module "prismjs/components/prism-handlebars.js";
declare module "prismjs/components/prism-less.js";
declare module "prismjs/components/prism-makefile.js";
declare module "prismjs/components/prism-markdown.js";
declare module "prismjs/components/prism-objectivec.js";
declare module "prismjs/components/prism-ocaml.js";
declare module "prismjs/components/prism-python.js";
declare module "prismjs/components/prism-reason.js";
declare module "prismjs/components/prism-rust.js";
declare module "prismjs/components/prism-sass.js";
declare module "prismjs/components/prism-scss.js";
declare module "prismjs/components/prism-solidity.js";
declare module "prismjs/components/prism-sql.js";
declare module "prismjs/components/prism-stylus.js";
declare module "prismjs/components/prism-swift.js";
declare module "prismjs/components/prism-wasm.js";
declare module "prismjs/components/prism-yaml.js";

3. 完成这些步骤后，再次运行 npm run build

[transitive-bullshit]

This should be resolved by adding prismjs to your app as a dependency.

Also update to latest release which fixes some related issues.