Accessing URL fragments in Next JS with context during the execution of getServerSideProps

I am trying to extract a URL fragment using getServerSideProps. The URL is structured like this: 

http://localhost:3000/some-folder#desiredParam=value

Even though I pass the context as an argument to the getServerSideProps function, I am struggling to retrieve the URL parameter because it's not in the format of 

http://localhost:3000/some-folder?desiredParam=value
. If it were, I could simply use context.query.desiredParam

When I try using context.query.url, it returns /some-folder, and context.query gives me null.

If only I could access the entire window.location, I would split the string by #. Unfortunately, that's not possible with getServerSideProps.

So my question remains: what steps can I take to retrieve the value of desiredParam?

typescriptnext.jsserver-side-rendering

Answer №1

The concept of a URL fragment is specific to the client-side environment.

Unlike other parts of the URL, the fragment is not included in the HTTP GET-request. This means it can be modified without triggering any server requests. This behavior is not determined by your framework but is actually defined by fundamental web standards. Client-side frameworks do not encounter this issue since they operate on the client side.

If you require server-side content to be influenced by the fragment, you will need to extract this information on the client side and transmit it to the server through alternative methods.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Transitioning from Global Namespace in JavaScript to TypeScript: A seamless migration journey

I currently have a collection of files like: library0.js library1.js ... libraryn.js Each file contributes to the creation of a global object known as "MY_GLOBAL" similarly to this example: library0.js // Ensure the MY_GLOBAL namespace is available if ...

javascripttypescript

Is there a way for me to retrieve the header values of a table when I click on a cell?

I have a project where I am developing an application for booking rooms using Angular 2. One of the requirements is to be able to select a cell in a table and retrieve the values of the vertical and horizontal headers, such as "Room 1" and "9:00". The data ...

htmlcssangulartypescript

The attribute 'map' is not found on the data type 'Observable<[{}, {}]>'

Struggling to incorporate map, PublishReplay, and other rxjs functions into Angular6, I keep encountering a compilation error stating "Property 'map' does not exist on type 'Observable<[{}, {}]>'" every time. The same issue arises wh ...

angulartypescriptobservable

Combine two streams under certain conditions using RxJs

When working with streams, I am facing a scenario where I have two server calls to make in order to get the required response. However, if the first call returns data, I do not want to execute the second call. I have been struggling to find the proper comb ...

angulartypescriptrxjs

Retrieve a collection of nested dictionaries containing flask and angular data

In my app development journey with flask and ionic(angular), I'm working on returning a JSON list. Here's the python code snippet: def get-stocks(): # Select all stocks cursor.execute("""SELECT * FROM `tbl_symbol_index`"" ...

htmlangulartypescriptionic2

What is the best way to interact with and modify the relationships of "many-to-many" fields in my database table?

As someone who is new to nestjs, I am working with two entities: @Entity({ name: "Books" }) @ObjectType() export class Book { @PrimaryGeneratedColumn() @Field() id: number; @Column() @Field() title: string; @ManyToMany(() => Auth ...

typescriptgraphqlnestjsapollotypeorm

Tips for transferring query parameters in a redirect within NextJS

Whenever a user tries to access a page without authentication, I automatically redirect them to the login page. After that, I want to display a message to inform them of why they were redirected. However, I am encountering an issue with passing parameter ...

next.jsserver-side-rendering

Guide on exporting type definitions and utilizing them with npm link for a local package

I am in the process of developing a new testing tool called tepper as an alternative to supertest. My goal is to make this package available in both ESM and CJS formats. However, I'm encountering an issue where users of the library are unable to locat ...

javascripttypescriptnpmtypescript-typingsnpm-package

Set values to the inner property of the object

In my configuration file, I have set up nested properties as shown below export class Config { public msalConfig: { auth: { authority: string; clientId: string; validateAuthority: boolean; redirectUri: ...

typescriptangular8

Skipping the installation of next-contentlayer in the nextjs 14.1.0 update

I am facing an issue while trying to install next-contentlayer in nextjs version 14.1.0. The error message is preventing me from completing the installation of next-contentlayer. Can someone please provide guidance on how to successfully install it? `np ...

next.jsblogscontentlayer

Angular - handling Observable<T> responses when using Http.post

One issue I encountered was when trying to implement a method that returns an Observable. Within this method, I utilized http.post to send a request to the backend. My goal was to store the JSON object response in an Observable variable and return it. Howe ...

angulartypescriptrxjsobservablerxjs6

Setting up Electron with React and TypeScript: A Comprehensive Guide

I've been developing an app using Electron, React (jsx), and Babel. However, I recently made the switch to TypeScript and I'm struggling to get everything functioning properly. The npm packages I've tried only work for either React or TypeSc ...

reactjstypescriptnpmwebpackelectron

Testing a NestJS service with multiple constructor parameters can be done by utilizing various techniques such as dependency

Content When testing a service that needs one parameter in the constructor, it's essential to initialize the service as a provider using an object instead of directly passing the service through: auth.service.ts (example) @Injectable() export class ...

node.jstypescripttestingjestjsnestjs

Workspace watch mode does not update Typescript definitions

Greetings to all who are reading this, I have created a React micro-frontend project using SPA v5.9, Webpack v5.75, Babel-loader v9.1, Ts-loader v9.4, and Yarn workspace v3.5. The project structure is very basic: Root SPA => Package Root Application S ...

typescriptwebpacksingle-page-applicationmicro-frontendyarn-workspaces

Unexpected errors are encountered when using ng serve

When I run the ng serve command, unexpected errors are occurring on my system. The errors include: PS C:\Users\SAYED-SADAT\Desktop\data\coding\itsm-frontend\itsm-frontend> ng serveYour global Angular CLI version (13.0 ...

angulartypescriptnpm

Is it possible to update the <Html "lang"/> attribute in next-i18next when the language changes in Next.js?

Next-i18next is being used for my multilingual website and it's working great for all components. However, I'm not sure how to change the language of the HTML tag in the _document.js file. Can anyone help me with this? ...

next.jsi18nextnext-i18next

[next-auth][error][adapter_error_getUserByAccount]; Unable to access attributes of an unspecified item (viewing 'findUnique')

Currently, I am developing a sign up page that integrates with three popular providers (Twitter, Facebook, and Instagram) using next-auth in combination with Prisma and MongoDB. However, I have encountered an issue while attempting to sign up using any of ...

mongodbnext.jsoauth-2.0prismanext-auth

Basic library using babel, TypeScript, and webpack - Error: (...) is not a recognized function; within Object.<anonymous>

Recently, I encountered a strange issue while trying to bundle a simple function using babel, typescript, and webpack. You can find the example that is not working at this link. To test it, simply download the code, run npm/yarn install, npm/yarn run buil ...

javascriptnode.jstypescriptwebpackbabeljs

NX combined with Nest.js and TypeORM, further enhanced with Webpack and Migrations

Recently, I embarked on a project using NX (Nest.js + Angular) and set up TypeORM for database configuration. While everything runs smoothly in "serve" mode, I found myself struggling with configuring migrations. In a typical Nest.js project, all files in ...

typescriptwebpacknestjstypeormnrwl-nx

What steps should I take to resolve the 'Unable to locate module: Cannot resolve 'os'' issue that arises when integrating Azure Application Insight with Next.JS and OpenTelemetry?

Interested in logging a Next.js application to Azure Application Insight. I have the code below in my `instrumentation.ts` file: import { AzureMonitorTraceExporter } from '@azure/monitor-opentelemetry-exporter' import { Resource } from '@ope ...

next.jsazure-application-insightsopen-telemetry