I'm currently developing a full-stack web application using Next JS that allows users to create and manage letters (referred to as applications) based on predefined templates. Once the user successfully creates an application, it is stored in a POSTGRES database hosted on Supabase. The home page retrieves and displays the list of applications created by the user. When a user chooses to preview an application, dynamic routing is implemented using the application IDs as parameters. Using getStaticPaths() to fetch route parameters from the database and retrieving data for the page based on the application ID with the getStaticProps() method during build time, we render the page accordingly. While this setup functions smoothly on localhost, we encounter issues on Vercel. Interestingly, dynamic routing works seamlessly for past applications on Vercel in every deployment, allowing users to preview their previous applications without any issue. However, when attempting to preview a newly created application, users are faced with a 404 error. Triggering a manual redeployment or committing changes to the main branch resolves the error for the specific application causing the problem.
export const getStaticPaths = async () => {
let APIendpoint;
if (process.env.NODE_ENV === 'development') {
APIendpoint = 'http://localhost:3000/api/fetchApplication'
}
else if (process.env.NODE_ENV === 'production') {
APIendpoint = 'https://templaterepo.vercel.app/api/fetchApplication';
}
const data = await getPaths(APIendpoint)
const paths = data.map((application) => {
return {
params: { id: application.appid.toString() }
}
})
return {
paths,
fallback: 'blocking'
}
}
export async function getStaticProps(context) {
const appID = context.params.id;
let APIendpoint;
if (process.env.NODE_ENV === 'development') {
APIendpoint = 'http://localhost:3000/api/fetchApplicationwithID'
}
else if (process.env.NODE_ENV === 'production') {
APIendpoint = 'https://templaterepo.vercel.app/api/fetchApplicationwithID';
}
let data = await getPageData(APIendpoint, appID);
return {
props: { data }
}
}
Below is the code for the dynamic [id].js page where I retrieve paths based on application IDs and fetch corresponding data at build time in the getStaticProps() function. While this functionality operates correctly on localhost, encountering a 404 error occurs prior to the execution of functions in Vercel deployments. Note: Vercel Framework Preset is configured for Next.js.
I've attempted several solutions, including adding href and as parameters in the Link component. Additionally, I modified my vercel.json file with the following configuration:
{
"rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}
Despite these efforts, the issue persists.