Hostname-specific React Component Imports

[steven-tey]

When building more complex multi-tenant applications where each site has it's own style guidelines, custom layouts, etc., it would be useful to import React Components that are specific to the hostname on server-side.

For example:

• I'm building an e-commerce storefront builder, store.com
• Each of my customers (gap.store.com, gucci.store.com) have their own custom Layout.js components
• I'd like to do the following:

// pages/_stores/[store]/index.js

export default function Index(props) {
    return (
        <Layout dangerouslySetInnerHTML={{__html: props.layout}}>
            ...
        </Layout>
    )
}

export async function getStaticProps({ params: { site } }) {
    const data = await prisma.site.findUnique({
        where: {
            site: site
        },
        select: {
           layout: true
        }
    });
    
    return {
        props: {
            layout: layout
        }
    }
}

Bonus: Being able to create & use custom tailwind.config.js setup for each site

[benjick]

Bonus: Being able to create & use custom tailwind.config.js setup for each site

Any news on this?

[steven-tey]

@benjick sorry for the late reply here! I believe this is possible with the /app directory in Next.js 13 – which was recently added in this PR: #181

Still need to explore this with Tailwind though!