nextjs-subdomain-example
nextjs-subdomain-example copied to clipboard
dcangulo
Multiple _document, _app, _error pages
Hi, Thank you very much for this example you made, I was looking for such an architecture.
But I have a problem, I have to open separate _document pages for subdomains. Do you know any way you can do this?
Example : (Directory List)
- pages -admin -__document.tsx - index.tsx -main - _document.tsx - index.tsx
@phibersoft
I'm not that familiar with _document as I haven't been able to use it that much.
If I understood correctly, you want a different _document for admin and main app?
Can we do something like this in _document.jsx?
import Document, { Html, Head, Main, NextScript } from 'next/document';
import Admin from './your-admin-component';
export default class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx);
return { ...initialProps };
}
render() {
const subdomain = window.location.hostname.split('.')[0];
return (
subdomain === 'admin' ? (
<Html>
<Head />
<body>
<Admin />
<NextScript />
</body>
</Html>
) : (
<Html>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
);
}
}
Haven't tried the example but I thought something like that. Basically it just renders different component based on the subdomain from the URL.
Thank you for the answer. I will use this and try it, if I find a positive way I will inform :)