NotionX / NotionX/react-notion-x
`notion image` alt text when using `next/image` with minimal example (no image)
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 5.4k
- Forks
- 645
- PR merge metrics
- No merged PRs in 30d
Description
Description
modified the [pageId].tsx to the following with the minimal example:
import * as React from 'react'
import Head from 'next/head'
import Image from 'next/image'
import Link from 'next/link'
import { NotionRenderer } from 'react-notion-x'
import { ExtendedRecordMap } from 'notion-types'
import { getPageTitle } from 'notion-utils'
export const NotionPage = ({
recordMap,
rootPageId,
darkMode
}: {
recordMap: ExtendedRecordMap
rootPageId?: string,
darkMode?: boolean
}) => {
if (!recordMap) {
return null
}
const title = getPageTitle(recordMap)
console.log(title, recordMap)
return (
<>
<Head>
<meta name='description' content='React Notion X Minimal Demo' />
<title>{title}</title>
</Head>
<NotionRenderer
recordMap={recordMap}
fullPage={true}
darkMode={!!darkMode}
rootPageId={rootPageId}
previewImages={true}
components={{
nextLink: Link,
nextImage: Image, // <--- This is what breaks it!
}}
/>
</>
)
}
See this:
instead of:
I've noticed using the previewImage prop does nothing, whether we use the modified getPage function that includes the preview image (which does include the preview image):
export async function getPage(pageId: string): Promise<ExtendedRecordMap> {
const recordMap = await notion.getPage(pageId)
const previewImageMap = await getPreviewImageMap(recordMap)
;(recordMap as any).preview_images = previewImageMap
return recordMap
}
The src of the broken image is /_next/image?url=https%3A%2F%2Fs3.us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F2eec259a-dedd-466b-9d1e-aefa1d23c500%2FUntitled.png%3FX-Amz-Algorithm%3DAWS4-HMAC-SHA256%26X-Amz-Content-Sha256%3DUNSIGNED-PAYLOAD%26X-Amz-Credential%3DAKIAT73L2G45EIPT3X45%252F20220923%252Fus-west-2%252Fs3%252Faws4_request%26X-Amz-Date%3D20220923T161815Z%26X-Amz-Expires%3D86400%26X-Amz-Signature%3Db1d482dd2266992fb32263660e792d28474765f6175754c9756eb0bcdfe927ec%26X-Amz-SignedHeaders%3Dhost%26x-id%3DGetObject&w=1080&q=75
when the next/image is removed, it works and we get https://s3.us-west-2.amazonaws.com/secure.notion-static.com/2eec259a-dedd-466b-9d1e-aefa1d23c500/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45EIPT3X45%2F20220923%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20220923T161900Z&X-Amz-Expires=86400&X-Amz-Signature=42db0a2329f3d5af47726b187c2a44b61dc275358f9e079c2292327c568fd147&X-Amz-SignedHeaders=host&x-id=GetObject
This is all tested with a local npm run build and npm start. Also observed hosted on vercel.
Notion Test Page ID
c372bd0775754bddab1a055d33cb1821
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the modified [pageId].tsx example and the NotionRenderer configuration, focusing on the nextImage: Image integration. Run npm run build and npm start with the provided Notion Test Page ID, then compare the next/image and native image behavior. Done means the Notion image renders successfully with next/image and its URL remains valid.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- nextjs, react, typescript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100