Hi @untold siren. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#subdomain > domain.com > docs.domain.com (retrn 404 on domain.com)
hollow belfryBOT
untold siren
thx
hollow belfryBOT
To achieve this, you can use the rewrites feature in Next.js. You can create a next.config.js file and add a rewrite rule to redirect requests from docs.domain.com to domain.com/docs.
Here is an example of how you can do this:
module.exports = {
async rewrites() {
return [
{
source: '/docs/:slug*',
has: [
{
type: 'host',
value: 'docs.domain.com',
},
],
destination: '/docs/:slug*',
},
];
},
};
This configuration will rewrite any request that comes to docs.domain.com/docs/hi to domain.com/docs/hi.
To return a 404 on domain.com/docs/hi, you can add a condition in your page component to check the host of the request. If the host is domain.com, you can return a 404 page.
Unfortunately, I don't have a direct example from the knowledge sources to show you how to return a 404 page based on the host. But you can use the getServerSideProps or getStaticProps functions in Next.js to fetch data server-side and conditionally return a 404 page.
For more information, you can refer to these sources:
- Vercel Guide on Redirects and Rewrites (https://vercel.com/guides/can-i-redirect-from-a-subdomain-to-a-subpath#can-i-redirect-from-a-subdomain-to-a-subpath)
- Next.js Documentation on Rewrites (https://nextjs.org/docs/app/api-reference/next-config-js/rewrites)
- Next.js Documentation on Dynamic Routes (https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes)
- Next.js Documentation on getServerSideProps (https://nextjs.org/docs/pages/building-your-application/data-fetching/get-server-side-props)
- Next.js Documentation on getStaticProps (https://nextjs.org/docs/pages/building-your-application/data-fetching/get-static-props)
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
untold siren
@hollow belfry
it does redirect to docs.domain.com/docs/hi but it doesnt return 404 on domain.com/docs/hi this is my page.tsx and next config
/** @type {import('next').NextConfig} */
const nextConfig = {
async rewrites() {
return [
{
source: '/docs/:slug*',
has: [
{
type: 'host',
value: 'docs.domain.com',
},
],
destination: '/docs/:slug*',
},
];
},
compiler: {
styledComponents: true,
},
images: {
remotePatterns: [
{
protocol: "https",
hostname: "www.roblox.com",
port: "",
pathname: "/headshot-thumbnail/image",
},
{
protocol: "https",
hostname: "cdn.discordapp.com",
port: "",
pathname: "/embed/avatars/**",
},
{
protocol: "https",
hostname: "cdn.discordapp.com",
port: "",
pathname: "/avatars/**",
},
],
},
};
export default nextConfig;
type Params = Promise<{ slug: string[] }>
export async function generateMetadata({ params }: { params: Params }) {
const { slug } = await params;
}
export default async function DocsPage({
params,
}: {
params: Params
}) {
const { slug } = await params;
const path = slug?.join('/') || '';
return <div>Documentation for: {path}</div>;
}```Let me check the knowledge base for you again. Give me one moment! :books:
To return a 404 page when accessing domain.com/docs/hi, you can use the notFound property in the getServerSideProps or getStaticProps function in your page component.
Unfortunately, the provided knowledge sources do not include a direct example of how to use getServerSideProps or getStaticProps in this context. However, I can guide you on a general approach.
Here's a general example of how you can use getServerSideProps to return a 404 page:
export async function getServerSideProps(context) {
const { req } = context;
const host = req.headers.host;
if (host === 'domain.com') {
return {
notFound: true,
};
}
// Your normal props generation code
return {
props: {}, // will be passed to the page component as props
};
}
In this example, getServerSideProps checks the host of the incoming request. If the host is domain.com, it returns notFound: true, which will cause Next.js to render a 404 page.
Please note that this is a general approach and you might need to adjust the code to fit your specific use case.
For more information, you can refer to the Next.js Documentation on getServerSideProps (https://nextjs.org/docs/pages/building-your-application/data-fetching/get-server-side-props).
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
untold siren
@hollow belfry how to integrate it in my page.tsx buddy
hollow belfryBOT
Let me check the knowledge base for you again. Give me one moment! :books:
You can integrate the getServerSideProps function in your page.tsx file like this:
import { GetServerSideProps } from 'next';
type Params = Promise<{ slug: string[] }>
export async function generateMetadata({ params }: { params: Params }) {
const { slug } = await params;
}
export default async function DocsPage({
params,
}: {
params: Params
}) {
const { slug } = await params;
const path = slug?.join('/') || '';
return <div>Documentation for: {path}</div>;
}
export const getServerSideProps: GetServerSideProps = async (context) => {
const { req } = context;
const host = req.headers.host;
if (host === 'domain.com') {
return {
notFound: true,
};
}
// Your normal props generation code
return {
props: {}, // will be passed to the page component as props
};
}
In this code, getServerSideProps is an async function that gets called by the server on every request. It checks the host of the incoming request, and if the host is domain.com, it returns notFound: true, which will cause Next.js to render a 404 page.
Please note that this is a general approach and you might need to adjust the code to fit your specific use case.
For more information, you can refer to the Next.js Documentation on getServerSideProps (https://nextjs.org/docs/pages/building-your-application/data-fetching/get-server-side-props).
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
untold siren
@hollow belfry ur useless this doesnt work it errored u dont use that in app router dumbass even I know that
hollow belfryBOT
Let me check the knowledge base for you again. Give me one moment! :books:
I apologize if my previous responses have caused any confusion. You're correct that the getServerSideProps function is not used in the App Router in Next.js. I appreciate your patience and understanding.
In the App Router, you can use the notFound function to render a 404 page. However, currently, Next.js only recognizes the 404 page in the root directory and cannot recognize a 404 page in a dynamic directory. You can only customize the root directory 404 page for now. This is a known issue and the Next.js team is working on it (source (https://github.com/vercel/next.js/issues/62046)).
For the redirection from domain.com/docs/hi to docs.domain.com/docs/hi, you can use the rewrites feature in the next.config.js file as I mentioned in the previous responses.
