I’m working on a white-label product which I want to migrate from a create-react-app project using react-router to NextJS. The requirements:
- Routing with a prefix in front of all routes like:
[partnerId]/route-a[partnerId]/route-b[partnerId]/route-c
- A custom stylesheet depending on the
partnerIdfrom the URL
With a traditional multi page application approach this would be pretty easy, as you could just include a different stylesheet depending on the partnerId.
With NextJS I can’t put my head around this.
I set up routing folder structure like following:
pages/[partnerId]/route-a.tsxpages/[partnerId]/route-b.tsxpages/[partnerId]/route-c.tsx
… which works pretty good. I can access the partnerId as a param using the useRouter() Hook.
Previously I did this using an async import for the stylesheet. Unfortunately this forced me to delay the rendering of the website until the stylesheet was loaded using “await”.
Ist there a NextJS approach I could utilize preventing this problem? I looked into:
- Custom app component
- Multi zones
- Multiple entry points with webpack
… but I am unsure what would be the best approach keeping the pros of SSG or SSR.
Would be great if I could get some inspiration from some of you experienced NextJS users :slight_smile:
