acorcutt / next-multi-host Goto Github PK
View Code? Open in Web Editor NEWMultiple domains hosting on next.js
Home Page: https://next-multi-host.vercel.app
Multiple domains hosting on next.js
Home Page: https://next-multi-host.vercel.app
Routes you do not rewrite will still run so:
/hello
will hit/pages/[host]
with 'hello' passed as the [host]
Maybe can reorder the pages to prevent this from happening /pages/host/[host]/...
When using your host redirect, NEXT.js is just showing an empty page instead of the custom 500 error page when a client error occur. Server side errors works as expected and is showing the custom 500 error page.
Next version 11.0.1
Node version 12.16.1
next.config.js
// Rewrites based on: https://github.com/acorcutt/next-multi-host
// Issue: https://github.com/vercel/next.js/discussions/12848
const moduleExports = {
async rewrites() {
return {
afterFiles: [
{
has: [
{
type: 'host',
value: '(?<host>.*)',
},
],
source: '/',
destination: '/hosts/:host',
},
{
has: [
{
type: 'host',
value: '(?<host>.*)',
},
],
source: '/:path*',
destination: '/hosts/:host/:path*',
}
],
};
},
sassOptions: {
includePaths: ['.'],
},
productionBrowserSourceMaps: true,
webpack: (config) => {
// Add SVGR Loader
config.module.rules.push({
test: /\.svg$/,
use: ["@svgr/webpack", 'url-loader']
});
return config
},
}
module.exports = moduleExports;
_error.tsx
import logger from 'utilities/logger';
import { NextPageContext, NextPage } from 'next';
import Custom500 from './Custom500';
const MyError: NextPage = () => (
<Custom500 />
);
MyError.getInitialProps = async ({ res, err }: NextPageContext) => {
const statusCode = res ? res.statusCode : err ? err.statusCode : 404;
if (statusCode) {
logger.error(`An error ${statusCode} occurred on server: ${err}`);
} else {
logger.error(`An error occurred on client: ${err}`)
}
return { statusCode }
}
export default MyError
Custom500.tsx
const Custom500: React.FC = () => {
return <h1>500 - Server-side error occurred</h1>
}
export default Custom500;
As seen below, the log from getInitalProps inside _error.tsx is used, but still not showing the Custom500.tsx. Is it the host redirect that is causing the client to be unable to find the Custom500.tsx page?
Thank you for your solution.
It works great when I don't have index.js
page but when I have, all sub-domain routes always route to /
Any ideas?
How do you test different host in development mode with this setup? Would be nice to add a URL param (like next is doing for i18n support) to switch from one host to the other
Deploy to Vercel replaces some headers like cache-control with placeholders like $cache
This is running before other routes
{
has: [
{
type: 'host',
value: '(?<host>.*)',
},
],
source: '/:slug*',
destination: '/:host/:slug*',
},
I would like to know if this approach is working? Or do you know any limitations?
Because I need to start working on a website where the domain will be a workspace and based on the domain we will create static content.
I know it is possible with SSR but I prefer to have SSG.
Thanks in advance.
First of all congratulations for the study.
Forgive my English, I'm Brazilian.
I would like to know how the user authentication part would work, using static, would have how to do something using cookies/headers or would it be something on the client side only.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.