How to properly use Dynamic routes with server components
Answered
porto posted this in #help-forum
portoOP
I'm trying to set up dynamic routes rendered on the server-side that query the assets of the application (in the public directory). However, there's a difference in behavior between on-demand dynamic routes and generated routes (with generateStaticParams). Apparently, querying the assets only works when it's a route generated at build time. I'd like to understand why it's happening
My context: I'm trying to generate blurred images to show as image loaders, which is why I need to access the files within the public directory.
Live example: https://nextjs-image-loading.vercel.app/ (the broken pages are the ones with on-demand in the URL)
Repository: https://github.com/dpnunez/nextjs-image-loading/tree/main
My context: I'm trying to generate blurred images to show as image loaders, which is why I need to access the files within the public directory.
Live example: https://nextjs-image-loading.vercel.app/ (the broken pages are the ones with on-demand in the URL)
Repository: https://github.com/dpnunez/nextjs-image-loading/tree/main
Answered by Ray
you need to do this when you are deploying to serverless platform
https://vercel.com/guides/how-can-i-use-files-in-serverless-functions#examples-of-reading-files
and in the build process, next will copy the file inside public folder to a static folder in the output. Then, only the output folder will be uploaded to vercel
const buffer = await fs.readFile(`${process.cwd()}/${filePath}`)https://vercel.com/guides/how-can-i-use-files-in-serverless-functions#examples-of-reading-files
and in the build process, next will copy the file inside public folder to a static folder in the output. Then, only the output folder will be uploaded to vercel
3 Replies
@porto I'm trying to set up dynamic routes rendered on the server-side that query the assets of the application (in the public directory). However, there's a difference in behavior between on-demand dynamic routes and generated routes (with generateStaticParams). Apparently, querying the assets only works when it's a route generated at build time. I'd like to understand why it's happening
My context: I'm trying to generate blurred images to show as image loaders, which is why I need to access the files within the public directory.
Live example: https://nextjs-image-loading.vercel.app/ (the broken pages are the ones with on-demand in the URL)
Repository: https://github.com/dpnunez/nextjs-image-loading/tree/main
you need to do this when you are deploying to serverless platform
https://vercel.com/guides/how-can-i-use-files-in-serverless-functions#examples-of-reading-files
and in the build process, next will copy the file inside public folder to a static folder in the output. Then, only the output folder will be uploaded to vercel
const buffer = await fs.readFile(`${process.cwd()}/${filePath}`)https://vercel.com/guides/how-can-i-use-files-in-serverless-functions#examples-of-reading-files
and in the build process, next will copy the file inside public folder to a static folder in the output. Then, only the output folder will be uploaded to vercel
Answer
I assume your site should work fine when you run the production build locally because the public folder is in your file system
portoOP
It works here! Thank's 🙂