Multi Zones

It’s common to develop a website and a blog in separate technology stacks and projects. However, deploying them directly under the same domain (blog into a subdirectory) can be problematic. A common workaround would be to make it a subdomain rather than a subdirectory (blog.xxxx.com rather than xxxxx.com/blog). But, this makes it less cool.

Next.js+GatsbyJS

GatsbyJS is quite suitable for developing personal blogs because of its extensive plugin system. And Next.js IMO is the most popular framework for React developer now. My HP is made of Next.js and blog is made of GatsbyJS. And I struggled to deploy my HP to root and blog to subdirectory. I’d like to share this quite complicated how to with you.

Problems

Next.js and GatsbyJS differ in their default slashes handling.

Next.js removes the last slash by default (https://nextjs.org/docs/api-reference/next.config.js/trailing-slash). But GatsbyJS does the exact opposite — adds a slash forcibly by default (https://www.gatsbyjs.com/docs/reference/config-files/gatsby-config/#trailingslash).

Simply setting redirects in Next.js will result in infinite redirects and will not work.

How to set in Next.js

1. Document of how to set redirects in Next.js for multi zones does not work well as problems described above. But all these steps are necessary.

// change it to your blog site's domain
const BLOG_URL = "http://127.0.0.1:9000";
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  async rewrites() {    return [      {        source: "/blog/",        destination: `${BLOG_URL}/blog/`,      },      {        source: "/blog/:slug*",        destination: `${BLOG_URL}/blog/:slug*`,      },    ];  },};

module.exports = nextConfig;

2. Set trailingSlash to true so that the URL will have a slash.

// change it to your blog site's domain
const BLOG_URL = "http://127.0.0.1:9000";

/** @type {import('next').NextConfig} */
const nextConfig = {
  trailingSlash: true,  reactStrictMode: true,
  swcMinify: true,
  async rewrites() {
    return [
      {
        source: "/blog/",
        destination: `${BLOG_URL}/blog/`,
      },
      {
        source: "/blog/:slug*",
        destination: `${BLOG_URL}/blog/:slug*`,
      },
    ];
  },
};

module.exports = nextConfig;

How to set in GatsbyJS

1. Configure pathPrefix to enable deployment to subdirectories.

   Basically, following the instructions in GatsbyJS documentation will be OK.

   https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/

2. Set trailingSlash to never.

/**
 * @type {import('gatsby').GatsbyConfig}
 */
module.exports = {
  trailingSlash: `never`,  pathPrefix: `/blog`,

Try it in localhost

Start GatsbyJS blog part.

PREFIX_PATHS=true gatsby build
PREFIX_PATHS=true gatsby serve -H 0.0.0.0

Then start Next.js.

npm run dev

Access http://localhost:3000/blog/, you’ll find that it works. And of course, reloading page by F5 is fine without endless redirects.

Settings in GatsbyJS for deploying it in sub directory

When deploying the blog part of GatsbyJS, the generated html must be moved to the sub blog folder.

However, GatsbyJS still does not support exporting compiled files to non-public folders, so you need to install a plugin to do it.

https://www.npmjs.com/package/gatsby-plugin-output

/**
 * @type {import('gatsby').GatsbyConfig}
 */
module.exports = {
  trailingSlash: `never`,
  pathPrefix: `/blog`,
  plugins: [
    ...
    // put this plugin in the bottom of plugins    `gatsby-plugin-output`   ]

Add compile script.

{
  "scripts": {
    "build:vercel": "OUTPUT_DIR=dist/blog PREFIX_PATHS=true gatsby build"  }
}

Then simply set the target folder to dist.

Finish

It is somewhat complicated, but it is a good idea to try it as it is more flexible when projects are separately.

And here is the example project.

https://github.com/thundermiracle/next-with-gatsby