Hash navigation not working in Next.js
See original GitHub issuemdx-bundler
version: 3.4.1node
version: 15.5npm
version: 7.3.0
Relevant code or config
import { bundleMDX } from "mdx-bundler";
import {getMDXComponent} from 'mdx-bundler/client'
import {useMemo} from 'react'
import path from 'path'
if (process.platform === 'win32') {
process.env.ESBUILD_BINARY_PATH = path.join(
process.cwd(),
'node_modules',
'esbuild',
'esbuild.exe',
)
} else {
process.env.ESBUILD_BINARY_PATH = path.join(
process.cwd(),
'node_modules',
'esbuild',
'bin',
'esbuild',
)
}
export const getStaticProps = async ({ params }) => {
const mdxSource = `
${Array(1000).fill(0).map((_, index) => {
return `<h2 id="${index}">${index}</h2>`
})}
`.trim();
const result = await bundleMDX(mdxSource);
const { code } = result;
return {
props: { code }, // will be passed to the page component as props
};
};
export default function Post({ code }) {
const Component = useMemo(
() => getMDXComponent(code))
return (
<div>
<Component />
</div>
);
}
Hash links don’t work in Next.js on refresh. If you navigate to them while on the page it will work but if you go to them directly you can get problems.
The screen goes down to the hash link but then goes up again.
Reproduction repository:
https://github.com/MatthewCaseres/mdx-bundler-experiments
Notes: This is an issue in next-mdx-remote as well, here’s an issue that is related but not identical from their repo. https://github.com/hashicorp/next-mdx-remote/issues/65
Issue Analytics
- State:
- Created 2 years ago
- Comments:5
Top Results From Across the Web
How to detect change in the URL hash in Next.js?
You can listen to hash changes using hashChangeStart event from router.events . const Test = () => { const router = useRouter(); ...
Read more >`<Link />` doesn't work with hashes · Issue #5161 · vercel/next.js
I know I can access the variable, but the problem is neither Next nor window hashchange event is telling me when the value...
Read more >Can't navigate to hash id using NextJS and Framer Motion
I'm working on a NextJS website with framer motion. However, once I start using exit animations, the hash id navigation in my nav...
Read more >Shallow Routing - Next.js
Shallow routing allows you to change the URL without running data fetching methods again, that includes getServerSideProps , getStaticProps , and ...
Read more >nextjs router push with hash - CodeSandbox
Templatenextjs-api; Environmentnext. Files. pages. [dynamic].js. index.js. README.md. package.json. yarn.lock. Dependencies.
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Hmm, it happens consistently for me in local development but not when I deployed to https://mdx-bundler-experiments.vercel.app.
Thanks for your responsiveness and maintenance work, I’ll be migrating from next-mdx-remote now that is resolved.
No problem!
Glad to hear that
mdx-bundler
does what you need!