I have a website that is statically exported but has dynamic routes.
During development, the site works fine. However, when I build and export it, then serve the static files using serve, an issue arises.
If you go to the site root and click on a link that takes you to a dynamic post page like http://localhost:3000/post/1, it will work initially. But if you refresh the page or visit directly, it returns a 404 error.
https://i.stack.imgur.com/MqQAE.gif
Why does this happen? Do dynamic routes that rely on the router query object not function properly when statically exported?
The documentation for dynamic routes doesn't mention any constraints related to using dynamic routes with static export.
The code:
Starting with the static example in Next.js, I made modifications to its pages/post/[id].tsx file by eliminating the getStaticPaths and getStaticProps (since I don't require static generation at build time) and introduced client-side fetching upon component mounting. The value of router.query.id is obtained to fetch data:
⚡ View CodeSandbox snippet here (works fine as it's in dev mode, not served from exported files)
import Head from 'next/head'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { useEffect, useState } from 'react'
import { GetPost } from '../../lib/postdata_api'
import { PostData } from '../../types/postdata'
const Post = () => {
const [postData, setPostData] = useState<null | PostData>(null)
const router = useRouter()
const id = router.query.id as string
const fetchData = async () => setPostData(await GetPost(id))
useEffect(() => {
if (!router.isReady) return
fetchData()
}, [router, router.isReady])
if (!postData) return 'Loading...'
return (
<main>
<Head>
<title>{postData.title}</title>
</Head>
<h1>{postData.title}</h1>
<p>{postData.body}</p>
<Link href="/">
<a>Go back to home</a>
</Link>
</main>
)
}
export default Post
Expected Behaviour
I anticipated it would behave the same way as in development mode, allowing users to:
- Click on a link on the homepage
- Access the dynamic post page e.g.,
/post/1 - Refresh or directly visit the post without encountering a 404 error
To Reproduce
- Download the CodeSandbox project or access the GitHub repository
- Run
npm run export && serve out - Visit
http://localhost:3000 - Click on a link to view a post
- Press refresh to see the 404 error