Next.js Discord

Discord Forum

Multi-Zone shared component styles

Unanswered
Savannah posted this in #help-forum
Open in Discord
SavannahOP
Can anyone point me in the right direction. When I run the application all the styles load correctly, but when I navigate to another app/zone all the styles do not render and I see all assets in network tab are 404. I navigate back to the base app and all styles and assets load as expected.

Base app
const nextConfig = {
    async rewrites() {
        return [
            {
                source: '/docs',
                destination: 'http://localhost:3001/docs',
            },
            {
                source: '/',
                destination: 'http://localhost:3000',
            }
        ];
    }
};


Docs app
const nextConfig = {
    basePath: '/docs',
};

8 Replies

LuisLl
Are you using multiple rootLayouts?
@LuisLl Are you using multiple rootLayouts?
SavannahOP
Inside my apps directory I have a "docs/app/layout.tsx" and "web/app/layout.tsx".
SavannahOP
@LuisLl is what I have incorrect? Is there a way that you have found that works better?
@Savannah Inside my apps directory I have a "docs/app/layout.tsx" and "web/app/layout.tsx".
LuisLl
Do you have a monorepo? I ask because there seem to be 2 apps
@LuisLl Do you have a monorepo? I ask because there seem to be 2 apps
SavannahOP
Yes, it's a mono-repo.
@LuisLl Do you have a monorepo? I ask because there seem to be 2 apps
SavannahOP
It's a very basic setup and I'm just trying to get a POC built to get more familiar with this concept.
@LuisLl Do you have a monorepo? I ask because there seem to be 2 apps
SavannahOP
Maybe my concept of what a multi-zone application is not correct. My thought was that I can have an application/zone for some generic type pages like about, contact, etc. Have another application/zone for "Feature A". Have another application/zone for "Feature B". Have all applications/zones share common header/navigation/footer components.
LuisLl
Just make a single app with multiple nested layouts and groups, or multiple root layouts if necessary.

The former will work great for what you’re looking to do, just share some common layout between different sections of your app, and it’s the default way to work with Next.js routing.

The latter is also valid, but have in mind that it will force a full page load on navigation between routes that are in different layouts.