marsh abyss
My app has the following folder structure:
I want to go from:
www.domain.com/es/go/page to go.domain.com/es/page
or
www.domain.com/es/app/page to app.domain.com/es/page
tepid rivetBOT
Hi @marsh abyss. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
To achieve the desired routing from www.domain.com/es/go/page to go.domain.com/es/page and www.domain.com/es/app/page to app.domain.com/es/page, you can use Next.js rewrites and Vercel's domain routing.
Firstly, you need to configure your next.config.js file to handle rewrites. Here's an example of how you can do this:
module.exports = {
async rewrites() {
return [
{
source: '/:locale/go/:page*',
has: [
{
type: 'host',
value: 'go.domain.com',
},
],
destination: '/:locale/go/:page*',
},
{
source: '/:locale/app/:page*',
has: [
{
type: 'host',
value: 'app.domain.com',
},
],
destination: '/:locale/app/:page*',
},
];
},
};
This configuration will rewrite requests from go.domain.com/es/page to www.domain.com/es/go/page and app.domain.com/es/page to www.domain.com/es/app/page (source (https://vercel.com/guides/can-i-redirect-from-a-subdomain-to-a-subpath#can-i-redirect-from-a-subdomain-to-a-subpath)).
Next, you need to configure your domain routing in next.config.js:
module.exports = {
i18n: {
locales: ['en-US', 'es'],
defaultLocale: 'en-US',
domains: [
{
domain: 'domain.com',
defaultLocale: 'en-US',
},
{
domain: 'go.domain.com',
defaultLocale: 'es',
},
{
domain: 'app.domain.com',
defaultLocale: 'es',
},
],
},
};
This configuration will serve locales from different domains (source (https://nextjs.org/docs/pages/building-your-application/routing/internationalization#locale-strategies)).
Finally, you need to add your subdomains to your Vercel project. You can do this from the Project Domains page in your Vercel dashboard (source (https://vercel.com/docs/projects/domains/add-a-domain#subdomains)).
domain.com and can set DNS records appropriately. If your domain is not registered with Vercel, you can change the nameservers directly from the domain registrar's dashboard (source (https://vercel.com/docs/projects/domains/working-with-nameservers#benefits-of-using-vercel-nameservers)).
marsh abyss
@tepid rivet How to make those rewrites only in production?
tepid rivetBOT
Let me check the knowledge base for you again. Give me one moment! :books:
To apply the rewrites only in a production environment, you can use the process.env.NODE_ENV variable to check the environment and conditionally apply the rewrites. Here's how you can modify the next.config.js file:
module.exports = {
async rewrites() {
if (process.env.NODE_ENV === 'production') {
return [
{
source: '/:locale/go/:page*',
has: [
{
type: 'host',
value: 'go.domain.com',
},
],
destination: '/:locale/go/:page*',
},
{
source: '/:locale/app/:page*',
has: [
{
type: 'host',
value: 'app.domain.com',
},
],
destination: '/:locale/app/:page*',
},
];
} else {
// Return an empty array or any rewrites for non-production environments
return [];
}
},
};
In this configuration, the rewrites will only be applied when the NODE_ENV environment variable is set to 'production', which is typically the case in a production environment. In other environments (like development or testing), no rewrites will be applied (or you can specify different rewrites if needed).
process.env.NODE_ENV variable is automatically set by Next.js based on the context (next dev, next build, etc.), but you can also manually set it in your environment or in a .env file (source (https://github.com/vercel/next.js/issues/57695)).
marsh abyss
@tepid rivet how to configure my custom domain "kode.menu" in Vercel? I've already added domain name servers from Squarespace
tepid rivetBOT
Let me check the knowledge base for you again. Give me one moment! :books:
To configure your custom domain "kode.menu" in Vercel, follow these steps:
Add your domain to your Vercel project: Navigate to the Domains section under the Settings tab for the project, enter "kode.menu" for your custom domain and click "Add". You can add both apex and subdomains to your project (source (https://vercel.com/guides/how-do-i-add-a-custom-domain-to-my-vercel-project#how-do-i-add-a-custom-domain-to-my-vercel-project)).
Verify your domain: Once you have added your custom domain, you will need to verify the domain so it can be used with your Vercel Project. The dashboard will automatically provide further instructions required for verifying your domain. Depending on the type of domain added, either apex or subdomain, you will be presented with differing options. Apex domains can be verified by adding an A record with your existing DNS provider while subdomains can be verified by adding a CNAME record (source (https://vercel.com/guides/how-do-i-add-a-custom-domain-to-my-vercel-project#how-do-i-add-a-custom-domain-to-my-vercel-project)).
Add custom nameservers: If you want to use custom nameservers, navigate to the Domains tab and select the domain. On your domain's settings page, under Nameservers, click the Edit button and add the new nameservers (source (https://vercel.com/docs/projects/domains/managing-nameservers#managing-nameservers)).
marsh abyss
@tepid rivet I've already added *.kode.menu domain. I now need to add www, go and app subdomains. How to do so?
tepid rivetBOT
Let me check the knowledge base for you again. Give me one moment! :books:
To add www, go, and app subdomains to your kode.menu domain in Vercel, follow these steps:
Add your subdomains to your Vercel project: Navigate to the Domains section under the Settings tab for the project. Enter each of your subdomains (www.kode.menu, go.kode.menu, app.kode.menu) and click "Add" for each one (source (https://vercel.com/docs/projects/domains/add-a-domain#subdomains)).
Verify your subdomains: Once you have added your subdomains, you will need to verify them so they can be used with your Vercel Project. The dashboard will automatically provide further instructions required for verifying your subdomains. Subdomains can be verified by adding a CNAME record with your existing DNS provider (source (https://vercel.com/docs/projects/domains/add-a-domain#configure-the-domain)).
Configure DNS records for your subdomains: Configure the DNS records of your subdomains with your registrar so they can be used with your Project. The dashboard will automatically display different methods for configuring it. If you're using a Subdomain (e.g. www.kode.menu), you will need to configure it with a CNAME record (source (https://vercel.com/docs/projects/domains/add-a-domain#configure-the-domain)).
marsh abyss
@tepid rivet what do I need to add in table column "value"?
tepid rivetBOT
Let me check the knowledge base for you again. Give me one moment! :books:
The "value" you need to add in the table column depends on the context of the table. However, based on the knowledge sources provided, there are two possible contexts where "value" is mentioned:
In the context of the Vercel Checks API and Vercel REST API, the "value" is a float that represents the value measured for a particular metric, in milliseconds. For virtualExperienceScore, this value is the percentage between 0 and 1 (source (https://vercel.com/docs/observability/checks-overview/creating-checks#output), source (https://vercel.com/docs/rest-api#output)).
In the context of the EdgeConfigItemValue in the Vercel REST API, the "value" can be a string, number, boolean, object, or array (source (https://vercel.com/docs/rest-api/interfaces#edgeconfigitemvalue)).
marsh abyss
@tepid rivet I have my Squarespace domain pointing Cloudflare nameservers. I've added a DNS record in Cloudflare of type A with my root name and 76.76.21.21 as the content. How should I new add subdomains? What settings should I add in Cloudflare and Vercel?
tepid rivetBOT
Let me check the knowledge base for you again. Give me one moment! :books:
To add subdomains to your domain in Cloudflare and Vercel, follow these steps:
In Cloudflare:
CNAMEwww, go, app)cname.vercel-dns.comIn Vercel:
www.kode.menu, go.kode.menu, app.kode.menu) and click "Add" for each one (source (https://vercel.com/docs/projects/domains/add-a-domain#subdomains)).
marsh abyss
@tepid rivet why DNS only?
tepid rivetBOT
Let me check the knowledge base for you again. Give me one moment! :books:
The Proxy status in Cloudflare should be set to "DNS only" when using Vercel to ensure that DNS queries result in Vercel serving the request instead of Cloudflare.
When the Proxy status is set to "Proxied", Cloudflare acts as a reverse proxy for your website, and all traffic to your website is routed through Cloudflare's network. This can interfere with Vercel's own routing and performance optimizations.
marsh abyss
@tepid rivet is there any way to keep website traffic routed through Cloudflare?
tepid rivetBOT
Let me check the knowledge base for you again. Give me one moment! :books:
Yes, you can use Cloudflare as a reverse proxy to route your website traffic through Cloudflare's network before it reaches Vercel. Here are the steps to do so:
Insert a DNS record: In your Cloudflare dashboard, create a CNAME record pointing your domain to cname.vercel-dns.com (source (https://vercel.com/docs/integrations/external-platforms/cloudflare#insert-a-dns-record)).
Enable the Cloudflare proxy: Enable the Cloudflare proxy to send traffic through Cloudflare first (source (https://vercel.com/docs/integrations/external-platforms/cloudflare#enable-the-cloudflare-proxy)).
Set Cloudflare SSL/TLS encryption mode: Set Cloudflare SSL mode to Full to encrypt traffic between Cloudflare and Vercel (source (https://vercel.com/docs/integrations/external-platforms/cloudflare#set-cloudflare-ssl/tls-encryption-mode)).
Please note that using a proxy can impact the automatic provisioning of SSL certificates and domain configuration checks by Vercel. To allow this traffic to pass correctly, you must ensure your proxy does not block or automatically redirect traffic on the following HTTP wildcard path: <http://<YOUR_DOMAIN>/.well-known/acme-challenge/*.> You must also ensure that the HOST header is correctly forwarded (source (https://vercel.com/guides/can-i-use-a-proxy-on-top-of-my-vercel-deployment#domain-verification-and-certificate-provisioning)).
marsh abyss
@tepid rivet Lets start again.
I'm trying to add my Squarespace domain to Vercel project. I want to add www, app and go subdomains. Help me do it step by step. I need to know what to add inside Squarespace and inside Vercel.
tepid rivetBOT
Let me check the knowledge base for you again. Give me one moment! :books:
Sure, let's go through the process step by step.
Step 1: Add your domain to Vercel
kode.menu).Step 2: Add your subdomains to Vercel
www.kode.menu, go.kode.menu, app.kode.menu) (source (https://vercel.com/docs/projects/domains/add-a-domain#add-your-domain)).Step 3: Configure your domain in Squarespace
cname.vercel-dns.com. For example, for the www subdomain, the Host will be www and the Data will be cname.vercel-dns.com.76.76.21.21. The Host will be @ and the Data will be 76.76.21.21.Please note that changes to DNS records can take up to 48 hours to propagate due to DNS propagation (source (https://vercel.com/docs/projects/domains/managing-nameservers#managing-nameservers)).
Step 4: Verify your domain in Vercel
marsh abyss
@tepid rivet how to test if my subdomains work?
tepid rivetBOT
Let me check the knowledge base for you again. Give me one moment! :books:
You can test if your subdomains are working correctly by using the dig command in your terminal or using an online DNS lookup tool. Here's how you can do it:
Using the Terminal:
dig CNAME www.kode.menu +short
dig CNAME go.kode.menu +short
dig CNAME app.kode.menu +short
The output should be cname.vercel-dns.com for each command if the DNS records are set correctly (source (https://vercel.com/guides/how-can-i-debug-a-dns-record#how-can-i-debug-a-dns-record)).
Using an Online DNS Lookup Tool:
CNAME from the dropdown menu.www.kode.menu) in the search field and click "Search".cname.vercel-dns.com if the DNS records are set correctly.
marsh abyss
@tepid rivet how should I configure generateStaticParams for pages that go under a certain subdomain?
tepid rivetBOT
Let me check the knowledge base for you again. Give me one moment! :books:
The generateStaticParams function in Next.js is used to define the list of route segment parameters that will be statically generated at build time. However, it doesn't directly handle subdomains. Subdomains are typically handled at the DNS level, not at the application level.
If you want to serve different content based on the subdomain, you would typically handle this in your server-side logic, not in generateStaticParams. You would check the Host header of the incoming request and serve different content based on the subdomain.
However, if you have different Next.js applications for each subdomain, you would add the generateStaticParams function in the appropriate pages of each application.
Here's an example of how you might use generateStaticParams in a page:
// pages/blog/[slug].js
export async function generateStaticParams() {
const posts = await fetch('<https://.../posts'>).then((res) => res.json())
return posts.map((post) => ({
slug: post.slug,
}))
}
export default function Page({ params }) {
const { slug } = params
// ...
}
In this example, generateStaticParams fetches a list of blog posts and returns an array of parameters to generate static pages for each blog post. The slug parameter is used to generate the path for each static page (source (https://nextjs.org/docs/app/api-reference/functions/generate-static-params)).
generateStaticParams is used to generate static pages at build time. If you need to handle dynamic routes at request time, you would use server-side rendering or incremental static regeneration instead.
marsh abyss
@tepid rivet I SSG these pages:
├ ● /[locale]/go/[restaurant_slug]/[menu_slug]/[product_slug] 283 B 129 kB
├ ├ /es/go/fanaticos-terraza/cocktails/aperol-spritz
├ ├ /en/go/fanaticos-terraza/cocktails/aperol-spritz
├ ├ /es/go/fanaticos-terraza/cocktails/bramble
├ └ [+255 more paths]
If I go to www.my-custom-domain.com/es/go/fanaticos-terraza, it correctly shows page. But If I go to go.my-custom-domain.com/es/fanaticos-terraza, it displays and empty page (no errors).
This is my next.config.mjs rewrites:
async rewrites() {
if (process.env.NODE_ENV === 'production') {
console.log('Setting up rewrites for production');
return [
{
source: '/:locale/go/:page*',
has: [
{
type: 'host',
value: 'go.domain.com',
},
],
destination: '/:locale/go/:page*',
},
{
source: '/:locale/app/:page*',
has: [
{
type: 'host',
value: 'app.domain.com',
},
],
destination: '/:locale/app/:page*',
},
];
} else {
console.log('No rewrites in non-production mode');
return [];
}
},
I'll send you the middleware.ts file in next message
tepid rivetBOT
Let me check the knowledge base for you again. Give me one moment! :books:
Based on the information provided, it seems like you have correctly set up the rewrites in your next.config.mjs file. However, the issue might be related to how your application handles requests for the go.my-custom-domain.com subdomain.
The rewrites function in your next.config.mjs file is correctly set up to rewrite requests to go.domain.com and app.domain.com to the appropriate routes in your application. However, this only changes the internal routing of your application and does not affect how requests are handled at the network level.
If you're seeing an empty page when you navigate to go.my-custom-domain.com/es/fanaticos-terraza, it's possible that there's an issue with how your server or hosting provider is routing requests to the go.my-custom-domain.com subdomain.
Here are a few things you can check:
DNS Configuration: Ensure that the DNS records for go.my-custom-domain.com are correctly set up to point to your Vercel deployment. You can check this in your DNS provider's dashboard.
Vercel Domain Configuration: Make sure that go.my-custom-domain.com is added as a domain in your Vercel project settings.
Server-side Logic: If you're using custom server-side logic (e.g., in middleware.ts), make sure it correctly handles requests for the go.my-custom-domain.com subdomain.
marsh abyss
@tepid rivet is there any way to test subdomains locally?
tepid rivetBOT
Let me check the knowledge base for you again. Give me one moment! :books:
Yes, you can test subdomains locally by modifying your hosts file to map the subdomains to your local IP address (usually 127.0.0.1). Here's how you can do it:
On Unix-based systems (like macOS and Linux):
hosts file in a text editor with root permissions. For example, you can use the nano editor like this:sudo nano /etc/hosts
127.0.0.1 go.localhost
127.0.0.1 app.localhost
On Windows:
hosts file located at C:\Windows\System32\drivers\etc\hosts.127.0.0.1 go.localhost
127.0.0.1 app.localhost
After modifying the hosts file, you should be able to access your local server using the subdomains go.localhost and app.localhost (source (https://vercel.com/templates/next.js/ecommerce-crystalize-remix)).
Please note that you might need to clear your DNS cache for the changes to take effect. You can do this by running ipconfig /flushdns on Windows or dscacheutil -flushcache on macOS.
npm run dev or yarn dev in your project directory. By default, the server will start on port 3000, so you can access your site at <http://go.localhost:3000> and <http://app.localhost:3000.>
marsh abyss
@tepid rivet do I need to make any changes inside the project? I've added 127.0.0.1 go.localhost
127.0.0.1 app.localhost inside C:\Windows\System32\drivers\etc\hosts, flushed dns but I still cant load the page with subdomain
tepid rivetBOT
Let me check the knowledge base for you again. Give me one moment! :books:
If you've already updated your hosts file and flushed the DNS but still can't load the page with the subdomain, it might be due to how your application or local server is configured. Here are a few things you can check:
Local Server Configuration: Ensure your local server is running and accessible at localhost:3000 (or whichever port you're using). You can check this by navigating to <http://localhost:3000> in your web browser.
Application Configuration: If your application uses the Host header or similar to determine how to route requests, you might need to update your application configuration to recognize go.localhost and app.localhost as valid hosts.
Rewrites and Redirects: If your Next.js application uses rewrites or redirects that depend on the Host header, you might need to update these to work with go.localhost and app.localhost. For example, if you have a rewrite like this in your next.config.js:
module.exports = {
async rewrites() {
return [
{
source: '/:path*',
destination: '<http://app.mydomain.com/:path*',>
},
];
},
};
You might need to change it to this for local testing:
module.exports = {
async rewrites() {
return [
{
source: '/:path*',
destination: '<http://app.localhost:3000/:path*',>
},
];
},
};
@tepid rivet is this well structured for localhost?
if (process.env.NODE_ENV === 'production') {
console.log('Setting up rewrites for production');
return [
{
source: '/:locale/:page*',
has: [
{
type: 'host',
value: 'go.kode.menu',
},
],
destination: '/:locale/go/:page*',
},
{
source: '/:locale/:page*',
has: [
{
type: 'host',
value: 'app.kode.menu',
},
],
destination: '/:locale/app/:page*',
},
{
source: '/:locale/:page*',
has: [
{
type: 'host',
value: 'go.localhost:3000',
},
],
destination: '/:locale/go/:page*',
},
{
source: '/:locale/:page*',
has: [
{
type: 'host',
value: 'app.localhost:3000',
},
],
destination: '/:locale/app/:page*',
},
];
} else {
console.log('No rewrites in non-production mode');
return [];
}
tepid rivetBOT
Let me check the knowledge base for you again. Give me one moment! :books:
Your configuration seems correct for handling both production and local environments. You've correctly set up the rewrites function to handle different hosts for both production and local development.
However, you might want to consider adding rewrites for the local environment as well, not just for production. This way, you can test the rewrites locally before deploying your application. Here's how you can do it:
if (process.env.NODE_ENV === 'production') {
console.log('Setting up rewrites for production');
return [
{
source: '/:locale/:page*',
has: [
{
type: 'host',
value: 'go.kode.menu',
},
],
destination: '/:locale/go/:page*',
},
{
source: '/:locale/:page*',
has: [
{
type: 'host',
value: 'app.kode.menu',
},
],
destination: '/:locale/app/:page*',
},
];
} else {
console.log('Setting up rewrites for local development');
return [
{
source: '/:locale/:page*',
has: [
{
type: 'host',
value: 'go.localhost:3000',
},
],
destination: '/:locale/go/:page*',
},
{
source: '/:locale/:page*',
has: [
{
type: 'host',
value: 'app.localhost:3000',
},
],
destination: '/:locale/app/:page*',
},
];
}
NODE_ENV environment variable. When NODE_ENV is 'production', it will apply the rewrites for go.kode.menu and app.kode.menu. When NODE_ENV is not 'production' (which is typically the case in local development), it will apply the rewrites for go.localhost:3000 and app.localhost:3000 (source (https://nextjs.org/docs/app/api-reference/next-config-js/rewrites)).
marsh abyss
@tepid rivet If I go to "http://go.localhost:3000/es/restaurant-123", it displays an error:
The following tags are missing in the Root Layout: <html>, <body>.
Read more at https://nextjs.org/docs/messages/missing-root-layout-tags
If I go to "http://go.localhost:3000/es/go/restaurant-123", it works.
If I go to "http://localhost:3000/es/go/restaurant-123", it works.
I want to show http://localhost:3000/es/go/restaurant-123 content and change url to http://go.localhost:3000/es/restaurant-123 when navigating to http://localhost:3000/es/go/restaurant-123
tepid rivetBOT
Let me check the knowledge base for you again. Give me one moment! :books:
The error message you're seeing suggests that your root layout is missing the required <html> and <body> tags. In Next.js, the root layout must define these tags since Next.js does not automatically create them (source (https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts#root-layout-required)).
Here's an example of how you can define a root layout with the required tags:
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}
This root layout should be placed in the app directory of your project, and it should be named layout.tsx (or layout.js or layout.jsx if you're using JavaScript).
As for the routing issue, it seems like you're trying to rewrite URLs from <http://localhost:3000/es/go/restaurant-123> to <http://go.localhost:3000/es/restaurant-123.> This can be achieved using Next.js's rewrites function in your next.config.js file. Here's an example:
module.exports = {
async rewrites() {
return [
{
source: '/:locale/go/:page*',
destination: '<http://go.localhost:3000/:locale/:page*',>
},
];
},
};
This configuration will rewrite any URL that matches the pattern /:locale/go/:page* to <http://go.localhost:3000/:locale/:page*.> The :locale and :page* path segments are dynamic and will match any value (source (https://nextjs.org/docs/app/api-reference/next-config-js/rewrites)).
<http://go.localhost:3000/es/restaurant-123,> you might see an error or a blank page.