It should also be noted that I use "fallback: true" in my getStaticPaths() which seems to affect this behaviour. But I think I still need this boolean to be true (I use it to generate landing pages from the root path, such as these urls above, I do it within [...uid].js)
Update: it does seem the the fallback option is what is causing the old page to be rendered. Can somebody explain how this is possible. Since I have updated the UID, how does my nextjs app knows that there has been a page with this UID and this content. (This is my first Nextjs website, apologies)
I was debugging what is going on in getStaticProps function and my that I search by is indeed david-buckley-retail-publix (the old UID), but then the pageDocument that I get after I search using .getByUID() has a UID of "david-buckley-retail-kroger" (the new UID page)
My client creates a lot of unique landing pages which he duplicates previous pages and he changes the URL.
So for example, he has a page with URL "/linkedin-proposal", he sends it across, he makes the call/deal and then 5 days later, he wants to create a new page called "/microsoft-proposal" which is almost exactly the same as the linkedin proposal page, but with different copy.
The problem is that the old linkedin proposal page is still working, but this time is showing microsoft proposal copy, because it fallsback to the new copy.
This behavior is happening because the UID field stores all previous values and allows you to query the document with these, even after the value has been changed. The reason it was designed this way was so that old link using the old UID value would still work (you wouldn't end up with broken links everywhere when you change the UID value).
So what we recommend doing is adding a check that compares the UID used to the current UID value. If it's an old UID value, then you redirect to the page using the new value.
In your particular case, the reason the old UID value works is indeed because you have fallback set to true. What I've done in my Next.js websites is add a useEffect to check if the UID value is out-of-date. Here is a simple example page that does this:
import React, { useEffect } from 'react'
import { useRouter } from 'next/router'
import Prismic from 'prismic-javascript'
import Custom404 from '../404'
import linkResolver from '../../utils/linkResolver'
export default function Page({ document, uid }) {
const router = useRouter()
if (router.isFallback) {
return <h1>Loading...</h1>
}
if (!document) {
return <Custom404 />
}
useEffect(() => {
if (document.uid !== uid) {
const forwardUrl = linkResolver(document)
router.replace(forwardUrl)
}
}, [document])
return (
<div>
...your page content
</div>
)
}
export async function getStaticPaths() {
// getStaticPaths code
}
export async function getStaticProps({ params }) {
const document = await Prismic.client('https://your-repo-name.cdn.prismic.io/api/v2')
.getByUID('page', params.uid)
return {
props: { document, uid: params.uid },
}
}
Give that a try and let me know if it solves your issue for you
