I am currently utilizing Create React App for my react application but I am in the process of migrating to Next.js. Accessing URL data such as host, protocol, and query parameters has posed a significant challenge.
After some trial and error, I realized that I can access this information through the context prop in the getServerSideProps function. While I am able to pass them as props to my component, I am hesitant to cascade these props down to deeply nested child components. How can I effectively access this URL information in distant child components?
The code snippet below is from Create React App. Obviously, using window.location.hostname on the server side is not an option so I need to find an alternative approach.
if (window !== undefined) {
const host = window.location.hostname;
if (host.includes('dev.')) {
env = 'DEV';
} else if (host.includes('int.')) {
env = 'INT';
} else if (host.includes('localhost') || host.includes('127.0.0.1')) {
env = 'LOCAL';
}
}
As for my work in Next.js, I have implemented the getServerSideProps function to retrieve this data.
export const getServerSideProps: GetServerSideProps<{requestUrlData: programServerSideProps}> = async (context: any) => {
const requestUrlData = await absoluteUrl(context.req);
return { props : {requestUrlData} }
How can I access the requestUrlData within that function without passing it down as props through multiple layers of child components?