When working with Next.js App Router in SSR, how can I retrieve the complete URL of the current page?
I am unable to use window.location.href due to the absence of a defined window object, and using useRouter() does not provide access to the full URL.
To incorporate middleware into your project, create a file named middleware.ts (or .js) in the root directory. For more information, visit this link.
import { NextResponse } from 'next/server';
export function middleware(request: Request) {
const requestHeaders = new Headers(request.headers);
requestHeaders.set('x-url', request.url);
return NextResponse.next({
request: {
headers: requestHeaders
}
});
}
You can then utilize these headers in your layout or page by referencing them. Learn more at this URL.
const requestUrl = headers().get('x-url')
While this solution may not work for every scenario or provide a direct answer to the question at hand, one approach is to utilize the spread operator to capture all URL parameters, regardless of how many there are. For instance:
/app
- page.tsx
- layout.tsx
/[...slug]
- page.tsx
In your /[...slug]
const DetailPage = async ({ params }) => {
console.log(params.slug)
return (
<div>...</div>
)
}
For example, accessing
www.website.com/hello/there/how/are/you['hello', 'there', 'how', 'are', 'you']If you have knowledge of your base URL (which is typically assumed), you can then reconstruct the URL as needed.
It is correct that there is no window object in SSR, so window.location.href cannot be used and the useRouter() hook is only available on the client side. However, with the useRouter hook, you can still obtain the current path name in SSR.
Potential Solution
To resolve this issue, you can install the package npm install nextjs-current-url. This package provides a function called getURL, which requires the req object typically available in the getServerSideProps.
export async function getServerSideProps(context) {
const { req } = context;
const the_url = await getUrl({ req });
return {
props: {
the_url,
},
};
}
Usage in your component:
const YourComponent = ({ the_url }) => {
return (
<div>
<h1>{the_url}</h1>
</div>
);
};
export default YourComponent;
UPDATED
You can also utilize it with AppRouter by importing and using it with an await keyword as shown below:
import { getUrl } from 'nextjs-current-url';
const YourComponent = () => {
const url = await getUrl();
return (
<div>
<h1>{url}</h1>
</div>
);
};
export default YourComponent;
UPDATED 2nd version
Similarly to the previous example with serverSideProps, you can use the context object to acquire the URL information. The context object contains data about the current request.
import { getUrl } from 'nextjs-current-url';
const ServerComponentLayout = ({ children }) => {
const the_url = getUrl({ req: context.req });
return (
<div>
{children}
<p>URL: {the_url}</p>
</div>
);
};
export default ServerComponentLayout;
Then include this layout component in your own component like this:
<ServerComponentLayout>
<h1>My Component</h1>
</ServerComponentLayout>
Hey there, I'm currently working on a simple coding project but seems to be encountering some roadblocks. The main objective of the code is to determine if a username exists in the system or not. Here's a snippet of the data structure and codes ...
My goal is to construct a parent component called Action, which includes two child components named Infos and Localisation. I want to connect the inputs of the children with the parent model. This is the model: export class Action{ title: string; ...
I'm looking to create a series of drop-down lists based on the JSON array provided below. There will be five drop-down lists, and when I select an option in one list, the other four should populate accordingly. For example, if I choose "Hindi" in the ...
I am working with a union type that consists of two interfaces, IUserInfosLogin and IUserInfosRegister. The TUserInfos type is defined as the union of these two interfaces. export interface IUserInfosLogin { usernameOrEmail: string; password: string; } ...
Here is the TS code I am working with: type Fruit = { kind: "apple" } | { kind: "grape"; color: "green" | "black" }; type FruitTaste<TFruit extends Fruit> = TFruit["kind"] extends "apple" ? "good" : TFruit["color"] extends "green" ? "good" : ...
I created a JavaScript script to send form data to my PHP backend. However, the text field was receiving it with incorrect encoding. Here is the meta tag on my website: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> Here&apo ...
Learning JavaScript has led me to discover the various methods for declaring arrays. var myArray = new Array() var myArray = new Array(3) var myArray = ["apples", "bananas", "oranges"] var myArray = [3] What sets them apart and which ways are typically ...
I have successfully implemented a JavaScript function on my aspx page. Here is the code snippet: <script type="text/javascript"> $(document).ready(function () { console.log("ready!"); var options = []; var ...
I have implemented a strict version of TypeScript and ESLint in my project. The code for this portal was originally sourced from the documentation available here: After making some modifications, the code now looks like this: import React, { useEffect, u ...
Check out this HTML code snippet I created: <div ng-controller="ctrl"> <custom-tag title = "name" body = "content"> </custom-tag> </div> Take a look at the controller and directive implementation below: var mod = angular.mod ...
Initially, I faced a challenge when trying to implement a function similar to mapDispatchToProps in Redux. I struggled with handling an array of functions (action creators) as arguments, but managed to come up with a workaround that works, although it feel ...
In my ng2 implementation, I have a user.service.ts file that calls a REST service and returns JSON data. The code snippet below shows how the getUser function retrieves the user information: getUser(id: number): Promise<User> { return this.http. ...
After making an API call, my react-native component is supposed to return some SVG. Despite using an async function with await, the function still returns a promise that has not resolved yet. I have seen similar questions asked before, but I am puzzled as ...
Positives: 'world'.toString() // "world" const example = {} example.toString() // "[object Object]" Negatives: true.toString() // throws TypeError false.toString() // throws TypeError Do you know of any other data types that wi ...
Please do not mark this as a duplicate since I have not found a solution yet. Any help would be appreciated. I have a file called category.json located next to my index.html file, containing the following JSON data: [{"name":"veg"},{"name","non-veg"}] W ...
While working with Angular JS to iterate through Twitter tweets using ng-repeat, I encountered the need to highlight certain parts of the tweet string such as @tag and #hash. To achieve this, it was suggested to utilize replace method to wrap these element ...
Below is a React Element named Info that has been attached to a Javascript object named myObj: let Info = ( <Info type="green" /> ); let myObj = { ReactComp: Info }; Now, the goal is to render the Info component using the above myObj objec ...
Is it possible to align the two pictures to the center of the page horizontally using only HTML and CSS? I've tried using this code but it doesn't seem to work: #product .container { display: flex; justify-content: space-between; flex-w ...
My application utilizes JavaScript to retrieve a string and send it via POST to a PHP file on the server for processing. The PHP receiver is responsible for parsing the string, performing tasks, and sending back status updates to JavaScript. However, after ...
I successfully executed this spec in Vega Editor: { "$schema": "https://vega.github.io/schema/vega/v3.0.json", "width": 1, "height": 1, "padding": "auto", "data": [ { "name": "source", "values": [ {"name": "Moyenne","vo ...