Navigating from Page 1 to Page 2 and then returning to Page 1 using the browser's back button causes Page 1 to malfunction in NextJS version 13

I am currently using next version 13.4.5 and implementing routing with typescript through /app.

On my first page, I have a <Link> (next/link) element that takes me to Page 2. However, when I use the browser back button to return to page 1, the layout breaks. The top section disappears and the page starts from the middle. The CSS styling for the rest of the pages also stops working.

Page 1 is fully server-side rendered (SSR), but in Page 2, I am using "use client"; within the page.tsx file.

If you would like to see the issue in action, feel free to visit the deployed site:

  1. The home page can be accessed at home page.
  2. To go to the login page (page 2), click on this link: login page.

To reproduce the error, visit and click on the "Get Started" button in the top right corner. This will trigger the next/link tag and take you to the login page. Then, try navigating back using the browser's back button to witness the issue.

As I am uncertain about what might be causing this problem, I prefer not to share any specific code snippets at this time.

htmlcssreactjsnext.jsserver-side-rendering

Answer №1

Upon further investigation, I was able to identify the root cause of the issue.

It turns out that the problem stemmed from having nested <html> tags.

The structure of the project looked something like this:

/
--> layout
--> page
--> /login
    --> layout (where the issue originated)
    --> page

It appears that I mistakenly included another html tag within the inner layout file.

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

What criteria do browsers follow to determine the specific colors to use for border styles like inset and outset?

When I set border: 1px outset blue; as the style for an element, the browser displays two distinct border colors: one for the top and left borders, and another for the bottom and right borders. li { border: 10px outset #0000FF; color: #FFF; ...

css

Python web scraping with BeautifulSoup to gather information

After searching on zillow, I aim to extract all items from the unordered list and target a specific class: "StyledPropertyCardDataWrapper-c11n-8-84-3__sc-1omp4c3-0 bKpguY property-card-data" This class contains information such as price, address ...

pythonhtmlselenium-webdriverweb-scrapingbeautifulsoup

Scroll automatically when dragging the mouse

My D3 tree creation is causing an issue with the horizontal scroll bar in Firefox 37. When trying to drag select a tree node, the horizontal scroll bar does not work. However, in Chrome, the horizontal scroll works fine during drag selection. <div cl ...

jquerycssd3.js

Getting the chosen option from React MUI Autocomplete with custom rendered content: A guide

Seeking assistance on retrieving the selected option from an Autocomplete feature that utilizes a custom renderOption function. Each option includes status (online/offline) and nickname. const renderOption = (props, option) => { console.log(props ...

reactjsmaterial-ui

Stylish CSS animation enhancing an image

Can a flash effect like the one in this image be created using only CSS? I attempted to use -webkit-filter, but it did not produce satisfactory results. ...

css

Mastering the art of utilizing clearInterval effectively

This reset button needs to clear/reset the timer. The issue is that when the user presses the start button more than once, it sets two timers - one from the previous start and one from the current start. I will be using clearInterval to solve this problem ...

javascripthtmlclearinterval

Attempting to extract information from a webpage that contains multiple data tables, but encountering an issue where only the first table is successfully scraped

For my current project, I am attempting to extract data from basketball players' profiles on Basketball-Reference. Each player page on B-R contains several tables of valuable information that I need to access. However, when trying to extract the table ...

pythonhtmlbeautifulsoupxml-parsinghtml-parsing

What are some creative ways to incorporate checkboxes into MaterialTable using React?

I am working on a project using react and I need to include a material-table with checkboxes. Can anyone provide guidance on how to achieve this? https://i.stack.imgur.com/yEBmd.png ...

reactjsmaterial-uimaterial-table

The sidebar remains concealed at all times within the HTML5UP prologue/Skeljs framework

Currently, I am using HTML5up Prologue with the skeljs framework at this link. In my design, I prefer to keep my menu navigation hidden on the left side, especially in the narrow view (<961pixels). The toggle div should always remain visible. For refer ...

jquerycssjavascript-framework

Two HTML elements positioned alongside each other with inline word wrapping

Apologies for the vague question title, which may not accurately reflect my requirements. This is one reason why I am struggling to find a solution through a simple Google search - I'm unsure of what terms to use. I am attempting to align some "label ...

htmlcsslayout

Dynamically disabling a button in ReactJS

I am a newcomer to ReactJS and I have a requirement to disable the update button if the length of the zip code is less than 5 or zero. However, I am encountering some challenges in implementing this. Here is my current code: let zipCodeButton = true; fun ...

reactjsreact-hooks

Troubleshooting: jQuery script encountering issues with loading Bodymovin JSON files

The animations for the slider and shuffle lottie are designed to go from 0 to 100 and then back to 0 when toggled, similar to the box animation. However, it appears that the slider animation disappears in the final frame while the shuffle animation appear ...

javascripthtmljquerylottiebodymovin

Ways to obtain data in JavaScript function from HTML

Struggling to pass the key from a database query in HTML using PHP to a JavaScript function? You're not alone. The challenge lies in passing the field_id to the updateRecords() JS function through the onClick() event of an HTML button. Previously, se ...

javascriptphphtmlajax

What is the process for clicking a button in Selenium Python that lacks a "select" tag and only becomes clickable after fulfilling certain conditions?

Currently, I am working on automating the process of downloading files. To locate these files, I need to interact with two dropdown menus: one named 'Select Period' where I choose a date, and the other named 'Select File Type' where I s ...

pythonhtmlselenium-webdriverautomationwebdriver

How to process response in React using Typescript and Axios?

What is the proper way to set the result of a function in a State variable? const [car, setCars] = useState<ICars[]>([]); useEffect(() =>{ const data = fetchCars(params.cartyp); //The return type of this function is: Promise<AxiosRespo ...

reactjstypescriptaxios

Tips for designing a pre-selection process

I've been considering the idea of implementing a temporary screen that allows users to choose between different options before proceeding to a specific page. For instance, on the contact page, users would be prompted with a question like "Are you loo ...

javascripthtmlcss

Fluid percentage-based layout

I have four separate Divs that I would like to position on my page in a specific layout. Here is an image showing how I want them positioned: In the future, I plan to add multiple svg files to Div 4 and I want it to be scrollable. Please note that I only ...

htmlcss

What is the process for inserting or removing a row with Javascript?

Currently, I am in the process of working on some HTML/PHP code which is displayed below. <h3 style="text-align:center;margin-top:45px;">Sitting Days</h3> <div class="sitting-days" style="display:flex; justify-content:center; margin-bottom ...

javascriptphpjqueryhtmljson

Deactivate the rest of the buttons by utilizing the e.target.id

I have ten expansion panels. When I click a button in one expansion panel, I want to disable other buttons in the remaining expansion panels. The issue is that when I try to target an id, it does not return e.target.id but instead returns as the value pass ...

javascripthtmlreactjsreduxmaterial-ui

Leverage the power of a useRef hook to dynamically update a state value within React, even when the object is potentially

I'm running into an issue with the useRef hook, as I'm receiving the error "object is possibly null" when attempting to use it to set a stateful object. const jselectRef = useRef<HTMLButtonElement>(null) const [defaultHeight, setDefaultHeig ...

reactjstypescript