getStaticProps request context (host) when on Vercel

[adriano-tirloni]

My app uses the whole url, including subdomain and domain to request the correct data / styling data from the backend.

When using getStaticProps + getStaticPaths with fallback: true in production with Vercel is it possible to know the host from the request that executed the serverless funciton?

Much like getServerSideProps, which I was able to make it work correctly.
Imagine this:

redsite.wiki.com/what-is-a-byte
bluesite.wiki.com/what-is-a-byte

[leerob]

getStaticProps runs at build time (unless using Incremental Static Regeneration) whereas getServerSideProps runs at request time.

If you need to fetch data on the client-side for a static page, you might consider serving a static shell (loading state) and using SWR to fetch data. I'd need to hear more about what you're trying to build 😄

[adriano-tirloni]

Hey @leerob, the use case would be Incremental Static Regeneration, like the example they provided (https://github.com/lfades/static-tweet) using getStaticProps + getStaticPaths with fallback: true to generate the static page at the first request, and regenerate if content changed (which for an article or CMS it rarely does)

The only difference is that all the information they need for the example comes via props, but I use the hostname and the path to render the page.

I do pure ServerSideRendering today, but the content is 99% static, and Incremental would bring a lot of benefits.

[leerob]

Gotcha! That makes more sense.

Based on the docs, it doesn't seem like you have access to req.

Where are you pulling data from in getStaticProps?

[eMKoded]

Any progress in this issue? I have exactly the same case as @adriano-tirloni. I managed to rewrite urls from /sample/[id] to /[host]/sample/[id] but it only works in the build time. When new previously unknown [id] comes I end up on fallback version of the page and JS error:

The provided as value (/sample/3311) is incompatible with the href value (/[host]/sample/[id])

Any idea how to overcome this? SSR is last resort...

[amfeng]

@eMKoded - I'm curious if you ever ended up figuring this out? I'm also running into the incompatible href issue, sadly. How did you rewrite your urls from /sample/[id] to /[host]/sample/[id]?

[eMKoded]

You can use customServer where you have access to req and res so you can prepare params to next's handler as you wish. Finally I ended up with SSR and custom cache.

[iNishant]

I have a similar use case. Using the subdomain from host, would want to fetch some app constants. Use case is similar to how slack workspaces work. Different workspaces on different subdomains.

[rwproj]

Same story. Thinking of trying to use async-hooks for this to get domain prefix from async hook context on server

[iNishant]

@rwproj using getInitialProps or getServerSideProps, this is pretty simple to do because you have access to req object and hence you can get the subdomain from the host(req.headers.host). Problem with this approach is re-render on each request even though the content, in my use case, is mostly static == changes infrequently.

Can't use "serving a static shell (loading state) and using SWR to fetch data." as suggested by @leerob as my use case is for landing pages hence SEO will be impacted.

[tomsoderlund]

@rwproj Did you get it to work with getStaticProps and async-hooks?

[ramiel]

This is very old, is there any news on this? is there in the road map any idea to support this use case?

[steven-tey]

Hey @ramiel! As mentioned below, we recently launched the Platforms Starter Kit that's should solve this use case – it's a comprehensive template for building multi-tenant applications with built-in custom domains support (+ unlimited custom domains 😉): https://demo.vercel.pub/platforms-starter-kit

Feel free to try it out and let us know what you think! :)

[threehams]

If you don't need both subdomain SSG and i18n at the same time, you can repurpose that system.

module.exports = {
  i18n: {
    locales: ["www", "partner"],
    domains: [
      {
        domain: "partner.domain.com",
        defaultLocale: "partner",
      },
      {
        domain: "www.domain.com",
        defaultLocale: "www",
      },
    ],
    defaultLocale: "www",
    localeDetection: false,
  },
};

This is absolutely not intended use, and using this will prevent you from doing localization, but the concepts are the same - segment static pages based on a property derived from the host.

[petrbela]

Isn't the locale system static (all the possible subdomains need to be known at compile time)? That would not work for dynamic subdomains that users can configure (as a "slug" in the database, for example).

[threehams]

Correct. This is not an ideal solution - more of a workaround for some cases since the alternatives (custom server, disabling SSG entirely) are far worse.

[wmattei]

I think this discussion should be answered, as it seems like a next.js limitation:
#21431

[steven-tey]

Hey @wmattei! As mentioned below, we recently launched the Platforms Starter Kit that's should solve this use case – it's a comprehensive template for building multi-tenant applications with built-in custom domains support (+ unlimited custom domains 😉): https://demo.vercel.pub/platforms-starter-kit

Feel free to try it out and let us know what you think! :)

[surjithctly]

I hope this solves the problem: https://multi-domain-first.vercel.app/ by leerob

[iNishant]

@surjithctly https://multi-domain-first.vercel.app/ by @leerob is a pretty cool idea but this isn't ideal for pages like landing pages (or other marketing pages) if I understand stale-while-revalidate correctly. Because the first request for any user is still a pure SSR call and that's where its crucial to load the page fast. It works like static after that (till swr period) as explained by @leerob.

Obviously, we can't get request context at build time so I feel what we actually need is an advanced version of getStaticPaths where you can not only iterate over some dynamic paths at build time but also iterate over some dynamic domains.

@leerob @timneutkens what you do think about this idea?

[Skarian]

Any update on this? @leerob @timneutkens

[steven-tey]

Hey @Skarian! As mentioned below, we recently launched the Platforms Starter Kit that's should solve this use case – it's a comprehensive template for building multi-tenant applications with built-in custom domains support (+ unlimited custom domains 😉): https://demo.vercel.pub/platforms-starter-kit

Feel free to try it out and let us know what you think! :)

[tomsoderlund]

@adriano-tirloni Here’s an example of hosting multiple domains on the same Next.js site (while maintaining multiple languages and static site generation/SSG), using Next.js’ i18n system:

https://github.com/tomsoderlund/nextjs-multi-domain-locale

[acorcutt]

You can use the host in rewrites in 10.2 https://nextjs.org/docs/api-reference/next.config.js/rewrites#header-cookie-and-query-matching so just send it through as a page param and build all pages under pages/[host]/

async rewrites() {
    return [
      {
        has: [
          {
            type: 'host',
            value: '(?<host>.*)',
          },
        ],
        source: '/',
        destination: '/:host',
      },
      {
        has: [
          {
            type: 'host',
            value: '(?<host>.*)',
          },
        ],
        source: '/:path*',
        destination: '/:host/:path*',
      },
    ];
  },

Then its available in static props:

export async function getStaticProps(context) {
  return {
    props: {
      host: context.params.host,
    },
  };
}

With fallbacks or blocking:

export async function getStaticPaths() {
  return {
    paths: [],
    fallback: 'blocking',
  };
}

Example: https://github.com/acorcutt/next-multi-host

[thadeucity]

Removing the node_modules and .next folders and building it again worked for me. Thank you guys!!!

[rambabusaravanan]

@acorcutt It's working like a charm for me. Really the simplest and awesome approach dude. Thanks a lot
I am using next 11.0.0 and webpack 5

[steven-tey]

Hey guys! As mentioned below, we recently launched the Platforms Starter Kit that's should solve this use case – it's a comprehensive template for building multi-tenant applications with built-in custom domains support (+ unlimited custom domains 😉): https://demo.vercel.pub/platforms-starter-kit

Feel free to try it out and let us know what you think! :)

[acorcutt]

@steven-tey Hi - does this mean the 50 domain limit is gone or is this different from the per-project domains on the pricing page?

[leerob]

Hey @acorcutt - happy to share there's now unlimited custom domains on Pro.

https://vercel.com/changelog/unlimited-custom-domains-for-all-pro-teams

[threehams]

As of Next 11, beforeFIles doesn't stop at the first rewrite - it loops through all of them in a cascading way.

I'm currently using fallback as a workaround, but that means there's a chance for leads to unexpected matches:

pages/
  [host]/
    user/
      account/
        claim.tsx
    account/
      [section].tsx

next.config.js

{
  fallback: [
    {
      source: "/:path*",
      destination: "/:host/:path*",
      has: [
        {
          type: "host",
          value: "(?<host>.*)",
        },
      ],
    },
  ]
}

Visiting /user/account/claim/ is meant to hit that rewrite and land on /[host=:host]/user/account/claim, but it ends up at /[host=user]/account/[section=claim].

If you're using fallback like this and hitting similar problems, I think it's possible to now move this to the end of beforeFiles instead.

[acorcutt]

@threehams Yes - if possible avoid using /:wildcard* matches that overlap with multiple routes, it does mean you have to add rewrites that match for every single route but will be safer.

[styxlab]

As of Next 12, this can now be accomplished in the edge handler _middleware.ts. This is a lot more transparent. Have a look at the hostname-rewrite example.

[murbanowicz]

@steven-tey do I get it right that at this point signing up has no effect and we just have to wait for some communication?

[steven-tey]

@murbanowicz yup! You won't get an email when you sign up now but you will get an email invitation to join the private repo when we add you! :)

[murbanowicz]

Thanks! Can't wait!

[stevemarksd]

Would you have an example? I can't really see anything there that can also rewrite client side router. @styxlab

[styxlab]

Would you have an example? I can't really see anything there that can also rewrite client side router. @styxlab

Did you see https://github.com/vercel/platforms ?

[steven-tey]

Quick update on this – we recently launched the Platforms Starter Kit that's a comprehensive template for building multi-tenant applications with built-in custom domains support (+ unlimited custom domains 😉): https://demo.vercel.pub/platforms-starter-kit

Feel free to try it out and let us know what you think! :)

[steven-tey]

CC: @styxlab @murbanowicz @threehams @acorcutt @Skarian @iNishant @surjithctly @wmattei @ramiel @tomsoderlund @petrbela

[piyushhanchate]

Is there a similar starter kit for the pages router? I will not be be able to use the app router since I extensively use Material UI and NextJS app router doesn't support it yet