Next.js Discord

Discord Forum

Browser Back Button Not working

Unanswered
dishant0406 posted this in #help-forum
Open in Discord
dishant0406OP
I am facing issue with nextjs app router when I am clicking the browser back button the url changes but the page remains the same
for example I am on page localhost:3000/hello/world
I click browser back button and go to localhost:3000/hello the page goes to the url
then again I click back button the url changes to localhost:3000 but the content remains the same as localhost:3000/hello I have to reload the page for it to work

7 Replies

fardeen awais
First of restart your current server again. Second thing give me your file structure to understand you better
@fardeen awais First of restart your current server again. Second thing give me your file structure to understand you better
dishant0406OP
the same problem when I deploy it as well, wait I will give the folder structure
import React from 'react'
import MethodCard from './MethodCard'

type Props = {}


const Methods = async (props: Props) => {
  const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/categories`,{ cache: 'no-store' })
  const data:[METHOD_DATA] = await res.json()

  return (
    <div  className='min-h-[100vh] flex py-[80px] px-[40px] items-center flex-col justify-center w-[100vw]'>
      <p className='text-2xl text-center font-bold'>
        Offset Methods
      </p>
      <div className='w-full flex justify-center gap-[1rem] mt-[40px] flex-wrap'>
      {
            data.map((method, index) => {

                return (
                  <MethodCard image={`/Images/Website/Method${index+1}.webp`} key={method.value} method={method}/>
                )
              
            })
          }
      </div>
    </div>
  )
}

export default Methods

is there any problem in this code block because it is generating infinite requests
to the url and I can see them in the brower requests tab
'use client';

import { Hero, Methods, Dealers, FAQ, Browse, FeaturedProjects, Footer, DesktopSwitch } from '@/components'
import React from 'react'

const HomePageComponent = () => {

  return (
      <div className='w-full h-full'>
        <Hero/>
        <FeaturedProjects/>
        <Methods/>
        <Dealers/>
        <FAQ/>
        <Browse/>
        <Footer/>
      </div>
  )
}

export default HomePageComponent

this is how this component is getting used
fardeen awais
can I see how you make the file structure?. I want to see how you make /hello end point page.
I want to see your file something like this ss i need: