"Critical issue: Meta tags are not present on the dynamic pages of the NextJS

In my NextJS application, the pages are structured as follows:

App
--pages
----_app.js
----index.js
----company.js
----users
------[userID].js

I have a dynamic page named [userID].js that retrieves the userID through the router to display information for different users. I am using next/head to generate meta tags dynamically. When I inspect the elements on the pages, I can see the meta tags there. However, when I view the source of the dynamic page [userID].js, the meta tags are missing. I can see the meta tags for all other pages except this one.

Can anyone shed some light on why this is happening and suggest a solution?

Thank you.

javascriptnext.js

Answer №1

When utilizing the Next.js router, keep in mind that it functions as a client-side router. This means that any meta tags generated based on user information obtained from the Next.js router will be added on the client-side.

As a result, these meta tags will be visible in the DevTools Elements panel after the client-side JavaScript has been executed, but they will not appear in the page source itself since it is initially served without JS execution.

This may not necessarily need to be addressed as an issue. However, if it is crucial for these meta tags to be present upon the first render, you can consider rendering the page on the server-side using getServerSideProps. Keep in mind that opting for this approach would mean sacrificing static optimization for the page.

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

Creating a shared observable array in KnockoutJs to be used for multiple select elements

When an employer needs to assign a specific employee and premium amount, they can click on the "Add Employee" button to reveal another form with a dropdown menu of employees and an input field for the premium amount. <select> <option>John& ...

javascriptselectknockout.jsshare

Cascading MVC 2 Dropdown menus

I am trying to bind a dropdown based on the change of another dropdown, but I keep getting an "Undefined" error. Here is my code snippet: <select id="BreakOutValue" class="input1_drop" onchange="onChange()" ></select> <%:Html.DropDownList( ...

c#javascriptjqueryasp.netasp.net-mvc-2

Obtain headers from receiving an external JavaScript file

I am trying to find a way to import an external .js file and access the response headers from that request. <script src="external/file.js?onload=callback"> function callback(data) { data.getAllResponseHeaders(); } </script> Unfortunately, ...

javascriptajaxhttphttp-headers

One potential solution is sending a message to a user via a server using JavaScript on Node.js

Hey there, I've encountered a minor issue and would appreciate your help. Recently, I developed a weather program in NodeJs where users can search for the weather in their city. However, I'm facing a challenge with displaying the weather data to ...

javascriptnode.jsexpress

How can I pass command line variables into an npm script?

I am facing an issue where I am attempting to pass a command line option (which is not stored in version control) to my main script index.js. This script performs specific actions based on a designated S3 bucket. Here is the relevant section from my packa ...

javascriptnode.jsshellnpmecmascript-6

Managing Modules at Runtime in Electron and Typescript: Best Practices to Ensure Smooth Operation

Creating an Electron application using Typescript has led to a specific project structure upon compilation: dist html index.html scripts ApplicationView.js ApplicationViewModel.js The index.html file includes the following script tag: <script ...

javascripttypescriptecmascript-6electron

Using AngularJS to bind radio buttons to ng-model

Here is a snippet of my HTML code where I attempted to bind the "formFriendsAll" scope to the ng-model. <form ng-submit="submitForm()" > <div class="col-sm-3"> <div class="form-group"> <label>Which Persons to show?< ...

javascriptangularjshtmlradio-buttonangularjs-ng-model

Show the components only if the final digit in their identification number is less than i

I have several span elements with IDs like "tag1", "tag2", etc. I want to display only the spans whose ID ends with a number less than 19. These elements are part of a class called "notVis", which is hidden by default using $(".notVis").hide(); when the ...

javascriptjquery

Using Jquery & HTML5 for Seamless Transition between Portrait and Landscape Modes

I am working on making my HTML page more user-friendly for tablets. One issue I'm facing is that when the tablet's orientation changes, the menu doesn't hide correctly if the width is less than the height. Here is the code snippet I have so ...

javascriptjqueryhtml

Regular expression: subpattern without immediate subsequent character

Consider a regular expression that needs to return true for any string containing the substring hello, followed by any string that does not start with ! or multiple instances of !. Here are some examples to clarify: var regExp = /someExpression/; regExp ...

javascriptregexnode.js

Modifying background with JavaScript and AJAX技术

I currently have a table structured like the following; <table style="width: 100%; border: solid 1px #666600; min-width: 800px" cellpadding="0" cellspacing="0"> <tr> <td id="aaa">&nbsp;</td> ... Using jQuery's ajax functi ...

javascriptajaxjquery

Is Jquery Steps causing interference with the datepicker functionality?

I am currently using the jquery steps plugin for creating a wizard on my website. However, I am experiencing some issues with the functionality of the datepicker and qtip inside the steps. Even after switching the .js references, the problem still persists ...

javascriptjquerydatepickerjquery-steps

When a block is clicked, jQuery will reveal that block while hiding the others sequentially, starting with the second block, then the third, and finally the fourth

Creating a navigation menu with 4 blocks can be a bit tricky, especially when trying to show one block at a time upon click. Here is my code attempt, but unfortunately it's not working as expected. I would greatly appreciate any help or suggestions on ...

javascriptjqueryhtmlcss

Adding a background image to a box in MUI is a simple task that can enhance

I've been attempting to include a background image in the Box component of mui, but I can't seem to get it to work. Here is the code I've been using: const Main = () => { return ( <Box sx={{backgroundImage:'images/cove ...

javascriptcssreactjsmaterial-ui

Experiencing difficulty decoding JSON output on jquarymobile's HTML page when making an Ajax request

After developing screens for my Android application using PhoneGap and jQuery Mobile, I have included the necessary JavaScript and CSS files in my HTML page: <link rel="stylesheet" href="css/jquery.mobile-1.3.1.css" /> <script src="js/jquery-1. ...

javascriptjsonjqueryjquery-mobilecordova

Exploring the process of passing an array as a function argument from PHP to JavaScript

I am looking for assistance in passing an array as a function argument from PHP to JS. The values I need are retrieved from a database. while ($rows = pg_fetch_array($qry)) { ?> <option value="<?php echo $rows[&ap ...

javascriptphpjson

JavaScript date selector allowing the selection of multiple dates

As a beginner in JavaScript, I am struggling to create a datepicker input field that allows multiple selections. Despite researching for solutions, none seem to fit my specific case. Can anyone offer guidance on how to achieve this? Your help is greatly ap ...

javascriptcsshtmltwitter-bootstrap

Utilizing dynamic routes and incorporating additional search parameters within the URL structure in NextJS has never

Is there a way to use router.push(url); to redirect a user with a URL structure like this: [:lang]/something/[...dynamicRouteParams]?searchParam=true. The problem I'm facing is that the user ends up being redirected to a page with a URL structure lik ...

javascriptroutesnext.js

Change the CSS element if the current URL is not example.com/page1 or example.com/page2

When I apply the following JS code snippets, my output is incorrect or does not display at all. Below are the codes in question: if (location.href != "website.com/page1" || "website.com/page2") { element.style.backgroundColor='none'; ...

javascripthtmlcsslocationlocation-href

Navigating through this object with PUG and Express: a step-by-step guide

I am currently working on a basic blockchain project to practice my skills with nodejs. I have created a blockchain object that consists of a block class, and now I want to loop through this object using pug. app.get('/', function(request, respon ...

javascriptnode.jsexpresspugblockchain