acorcutt / next-multi-host Goto Github PK

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

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?

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.

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.