I config a subdomain to my project. I want to redirect the subdomain (markdown-syntax-hub.tcblabber.cn) to a subpath (tcblabber.cn/markdown-syntax-hub).
I added vercel.json in the docs folder following the blogs and the community discussion below:
But the settings doesn’t work. My site URL are still https://markdown-syntax-hub.tcblabber.cn/.
The domain troubleshooting guide can help with most custom domain configuration issues. You might be able to use that guide to solve it before a human is available to help you. Then you can come back here and share the answer for bonus points.
You can also use v0 to narrow down the possibilities.
Hi @docsimpo, welcome to the Vercel Community!
It seems like the vercel.json file has rewrites configured instead of redirects.
The following vercel.json will redirect all paths from https://markdown-syntax-hub.tcblabber.cn/ to https://tcblabber.cn/markdown-syntax-hub. Can you add it to the project using the subdomain?
{
"trailingSlash": true,
"redirects": [
{
"source": "/(.*)",
"destination": "https://tcblabber.cn/markdown-syntax-hub"
}
]
}
Hello @anshumanb, thanks for your reply!
I added the code snippet redirects above to vercel.json. It redirects the URL to the subpath designated in destination, but causes a 404: Not_Found error.
Hi @docsimpo, thanks for sharing your outcome. I just tried it myself for one of my projects and the redirect worked fine. The only difference is the trailingSlash in the config. Are you using specifically for some reason? If not can you try removing it?
Hi @anshumanb , I removed the line of trailingSlash in vercel.json, but nothing changed. https://www.tcblabber.cn/markdown-syntax-hub is still a 404 page.
Hi @docsimpo, I think there is a confusion here. It seems like you are expecting the behavior of rewrites from redirects. Can you help me answer these questions?
If you want to show the content of the http://markdown-syntax-hub.tcblabber.cn/ application on the subpath without a redirect. Then you need to use rewrites from Next.js
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
async rewrites() {
return [
{
source: "/markdown-syntax-hub",
destination: "https://markdown-syntax-hub.tcblabber.cn",
},
];
},
};
export default nextConfig;
It is to be noted that the resources from the https://markdown-syntax-hub.tcblabber.cn app might fail to load if they are using the relative paths instead of absolute. To avoid this you can ensure that they use absolute path.
@anshumanb Thanks very much for your great patience and so many replies!
Here is the answers to your questions:
Even though http://markdown-syntax-hub.tcblabber.cn is an independent doc site, I wish it appears like a part of the main site (www.tcblabber.cn). That is why I wish its URL could be https://www.tcblabber.cn/markdown-syntax-hub.
I add a next.config.js file with the code you provide above in the docs folder which is set as the root folder by MkDocs. It doesn’t work too.
I see. In this case the next.config.js should be on the project with the root domain tcblabber.cn.
You can also use the vercel.json for this configuration.
{
"rewrites": [
{
"source": "/markdown-syntax-hub/:path*",
"destination": "https://markdown-syntax-hub.tcblabber.cn/:path*"
}
]
}
Or use the Next.js rewrites:
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
async rewrites() {
return [
{
"source": "/markdown-syntax-hub/:path*",
"destination": "https://markdown-syntax-hub.tcblabber.cn/:path*"
}
];
},
};
export default nextConfig;
@anshumanb I added vercel.json with the above code to the main site (www.tcblabber.cn). I also tried the codes in the post Can I redirect from a subdomain to a subpath? in a new commit. Both don’t work.
Hi @docsimpo, thanks for sharing the outcome. Let me try to recreate.
Hi @docsimpo, I was able to create an example of this. Where I rewrite the /blog route of my Next.js application to my blog application theanshuman.dev. I added the beforeFiles section to ensure the styles and js files load properly in the rewrite.
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
async rewrites() {
return {
afterFiles: [
{
source: "/blog/:path",
destination: "https://www.theanshuman.dev/articles/:path",
},
],
beforeFiles: [
{
source: "/_next/:path*",
missing: [
{
type: "header",
key: "referer",
value: "https://my-app.vercel.app/",
},
],
destination: "https://www.theanshuman.dev/_next/:path*",
},
],
fallback: [],
};
},
};
export default nextConfig;
Hi @anshumanb , according to the docs Rewrites on Vercel and Configuring projects with vercel.json: Rewrites, rewriting a site with subdomain to a subpath of its main site is an external rewrites.
I added a vercel.json at the root directory of the main site (www.tcblabber.cn). The code in the vercel.json is an imitation of the external rewrites example:
{
"rewrites": [
{
"source": "/markdown-syntax-hub/:path*",
"destination": "https://markdown-syntax-hub.tcblabber.cn/:path*"
}
]
}
As my understanding, it should work if the following conditions are met:
But it doesn’t. Visiting https://www.tcblabber.cn/markdown-syntax-hub/ opens a 404: Not Found page. The console shows an error:
markdown-syntax-hub/:1 GET https://www.tcblabber.cn/markdown-syntax-hub/ 404 (Not Found)
Navigated to https://www.tcblabber.cn/markdown-syntax-hub/
I like to know why prior to getting it work. If it can be fixed with a little effort, I like to go. Otherwise, I may leave it as it is until it can be done as simply as what the docs said.
I know nothing about Next.js. I can only copy and paste Next.js code. I am not a developer. If I need to learn Next.js, even though a little basics, I can feel a great pressure.
Hi @docsimpo, yes the rewrites are supposed to be minimal efforts. It’s just that in your case we’ve some other logic interfering. I just tried to recreate my example for your app and yes I also get a 404. Upon digging further I see some redirects that are causing the issue. I’ll keep you posted.
Ok, thank you @anshumanb !
Hi @docsimpo, I tried to fix the redirect issue and I was able to get it working (https://latest-next-ten.vercel.app/my-blog/basic/emphasis) for a few pages. But, overall I think this will take a bit more effort because you will have to ensure the static assets load as well as the links on the blog are always relative so interlinking between the pages work.
I’m still not sure about the root cause for redirect, my guess is that it’s due to trailingSlash in the URLs.
If you are curious, this is the next.config.ts I used:
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
async rewrites() {
return {
afterFiles: [
{
source: "/blog/:path*",
destination: "https://markdown-syntax-hub.tcblabber.cn/:path*/",
},
],
beforeFiles: [],
fallback: [
{
source: "/assets/stylesheets/palette.06af60db.min.css",
destination:
"https://markdown-syntax-hub.tcblabber.cn/assets/stylesheets/palette.06af60db.min.css",
},
{
source: "/assets/stylesheets/main.342714a4.min.css",
destination:
"https://markdown-syntax-hub.tcblabber.cn/assets/stylesheets/main.342714a4.min.css",
},
{
source: "/assets/stylesheets/palette.06af60db.min.css",
destination:
"https://markdown-syntax-hub.tcblabber.cn/stylesheets/main.342714a4.min.css",
},
{
source: "/stylesheets/header.css",
destination:
"https://markdown-syntax-hub.tcblabber.cn/stylesheets/header.css",
},
{
source: "/stylesheets/nav.css",
destination:
"https://markdown-syntax-hub.tcblabber.cn/stylesheets/nav.css",
},
{
source: "/stylesheets/footer.css",
destination:
"https://markdown-syntax-hub.tcblabber.cn/stylesheets/footer.css",
},
],
};
},
};
export default nextConfig;
Hello @anshumanb , I added the next.config.tsfile in the root of the main site (www.tcblabber.cn), copied and pasted the above code in it. It didn’t work too. This is the deployment: 2wLEcMMX6. Is it the right way to create the next.config.ts file?
What URLs do you refer to when you say trailingSlash, the URLs in the main site (www.tcblabber.cn) or those in the subsite (markdown-syntax-hub.tcblabber.cn)?
Yes, it needs to be added to the www.tcblabber.cn website. I can’t access the code base.
The trailingSlash redirects are on the markdown-syntax website.