I have a survey built with Next.js using Incremental Static Regeneration (ISR). I would like to bundle it so I can can either publish it to npm or host a single entry file so I can use the survey on other applications.
It's currently hosted on Vercel and uses getStaticProps and getStaticPaths to call my API of 'surveys' and 'survey questions'. ISR is great because it allows me to dynamically load each step of the survey based off of the API structure and if I modify it then the revalidate property will regenerate the new order or questions from the survey. It also lets me get away with only having one page for all surveys/question types.
My App structure is like this:
- src
- pages
- [surveyid]
- [...question].tsx
Based on the request (and response that was received during build time/revalidation) the static files for the survey-id are created and the next router will route to each survey question based off the next step in the json object from the api eg., /surveyid/question-1, /surveyid/question-2 etc..
This is all working well in production when deployed to Vercel.
When it comes to bundling this so a survey can be loaded into other sites I have been quite lost.
When I run next build it builds the prod files that are served to vercel but there are many entry points and not a single .js file.
I tried running next export and serving the .out folder locally and the pages and links are accurate but this breaks the ISR and after reading next.js documentation it states that next export doesn't work with ISR.
Ideally I would like to be able to build the application to a single entry file eg., index.js and then either publish as a package to npm or host on my server. Then load the survey by installing the package or adding the direct url to the src file of a script tag in my other projects eg., <script src='https://survey.com/widget.js'></script> and provide some settings/options to the request so I can tell it which survey to return.
Is there a way for this to be done while still maintaining ISR? Would I have to create some sort of entry file to dispatch the request and return the static files from my vercel server instead as a workaround?
I am currently trying to see if I can use rollup to build it out to a single file but I am unsure if this will break the next router when it comes to the dynamic rendering (or revalidation) of pages.
In a perfect world I would like to leverage some of the cool features of next like their middleware to determine the geolocation from the request header as well. But i'm happy if I can just get the survey to render in another project at this point.