To elaborate further, the question is as follows:
In Next.js, suppose there are multiple candidate screens as the source screen for a certain screen X. For the sake of explanation, let’s call these candidates screen A and screen B. Even after navigating through several screen transitions from screen X, how can I retrieve information about whether the initial source screen for screen X was screen A or screen B, and enable returning to the appropriate screen A or screen B from screen X? What kind of implementation should be considered?

The following is an illustration of the situation I would like to inquire about.

Illustration for explanation

In the above image, the light blue rectangles represent each screen, and for example, the notation “A: /a” indicates that the path for screen A is “/a”. This applies to other screens as well.

The rounded gray rectangles with text such as “Go to X” or “Go Back” represent buttons on the screen, and the black arrows originating from the buttons indicate the screen transitions that occur when the buttons are clicked. “Tr#1” and “Tr#2” refer to the first and second screen transitions, respectively.

As depicted in the diagram, it’s possible to navigate back and forth between screens X, Y, and Z multiple times.

I understand that implementations for screen transitions from Tr#1 to Tr#6 are feasible as follows. That is to say, by utilizing the router obtained through:

const router = useRouter()

each transition can be realized with the following code.

• Tr#1: router.push(‘/x’)
• Tr#2: router.push(‘/y’)
• Tr#3: router.push(‘/z’)
• Tr#4: router.push(‘/y’)
• Tr#5: router.push(‘/x’)

It is understood that by creating button handlers containing each of the above and setting them to the onClick prop of each button, the transitions can be achieved.

However, I don’t understand how to implement the screen transition Tr#6. In the previous diagram, Tr#6 is indicated by a red dashed line, and there is a red diamond shape along that line. This diamond shape indicates a conditional branching. Therefore, it is necessary to determine whether the source screen when initially transitioning to screen X was screen A or screen B and perform the screen transition accordingly.

Based on the above example,my question is,

how can I implement code to allow selecting either screen A or screen B from the “Go Back” button on screen X and navigate to the appropriate one?
Thank you in advance.

What I’ve done is as follows:

• I researched the Next official documentation to see if what I’m addressing in this question could be achieved.
• I searched to see if anyone had tackled similar issues and come up with solutions.
• Since I’ve often used Redux, I also considered creating a Redux slice to manage some sort of screen transition history, but if it’s possible to achieve using features provided by Next.js, I’d like to know that method.