How to configure Sub-folders with Next.js on Feather

Do not index

Let’s say your main domain is www.mydomain.com and feather blog url is my-domain.feather.blog and you want to host on /blog sub-folder.

To configure that, add this to your next.config.js. Make sure to change my-domain.feather.blog by your Feather blog url

/** @type {import('next').NextConfig} */
const nextConfig = {
  rewrites: async () => {
    return {
      beforeFiles: [
        {
          source: '/blog',
          destination: 'https://my-domain.feather.blog/blog',
        },
        {
          source: '/blog/:path*',
          destination: 'https://my-domain.feather.blog/blog/:path*',
        },
        {
          source: '/_feather',
          destination: 'https://my-domain.feather.blog/_feather',
        },
        {
          source: '/_feather/:path*',
          destination: 'https://my-domain.feather.blog/_feather/:path*',
        },
      ],
    }
  },
  headers: async () => {
    return [
      {
        source: '/blog',
        headers: [
          {
            key: 'X-Forwarded-Host',
            value: 'www.mydomain.com',
          },
        ],
      },
      {
        source: '/blog/:slug*',
        headers: [
          {
            key: 'X-Forwarded-Host',
            value: 'www.mydomain.com',
          },
        ],
      },
      {
        source: '/_feather',
        headers: [
          {
            key: 'X-Forwarded-Host',
            value: 'www.mydomain.com',
          },
        ],
      },

      {
        source: '/_feather/:slug*',
        headers: [
          {
            key: 'X-Forwarded-Host',
            value: 'www.mydomain.com',
          },
        ],
      },
    ]
  },
}

module.exports = nextConfig

By making the following change, we’re basically telling that: ”Hey Next.js, whenever a person goes to www.mydomain.com/blog, don’t do anything. Let feather handle it.”

Once this is done, go to Feather. Navigate to Settings > Features and switch on “Enable Subdirectory” feature and after that go to Settings > Sub-folder management and enter the following values,

💡

Make sure to replace www.mydomain.com with the domain you are using and blog with whatever sub-route you plan to use.

Important Note: Under the Domains section make sure that you are using Subdomain settings. If you have added a custom domain there, please remove it. Sub-folders does not require the Custom Domain configurations and if you have it, then the sub-folder will not work.

Once you do these, your sub-folder should be live. You should be able to access your feather site on www.mydomain.com/blog. If it’s not reach out to us at support@feather.so.

FAQ

Should we include the blog sitemap generated by Feather with our main page sitemap? How to configure with next-sitemap.config.js?

Yes, you should include both sitemaps. Here's how to handle it: When using Next.js with next-sitemap, your main sitemap is generated during build time. To include Feather's blog sitemap, you'll need to create an indexed sitemap that includes both: 1. Your main site sitemap 2. Feather's blog sitemap For example, if your domain is www.mydomain.com, you'll have: • Main sitemap: www.mydomain.com/sitemap.xml • Blog sitemap: www.mydomain.com/_feather/blog/sitemap.xml This ensures that: • Search engine crawlers can discover all your content • SEO tools like Outrank can properly detect all your pages • Your robots.txt will reference both sitemaps for proper crawling This setup allows for better content discovery and improved SEO performance across both your main site and blog content.