Feature: Apply a correct link to the back button of each page

[nick-y-ito]

Overview

This PR corrects the link of the back button on the header of each page.

Changes

Please take a look at the comments I left in each file in this PR.

Review points

• Do you think the back button's behavior on the foods page is acceptable? It appears when filtering by a group, even though the foods page has not been navigated from the group single page. I could not figure out a simple way how to pass the referrer's URL from a server component into a client component.

References

Notes

Screen Captures

https://github.com/nishiki-tech/nishiki-frontend/assets/99148565/6757dbf6-a2ee-4e06-a26a-df2dd589c166

Assignee Checklist:

• [x] The naming convention of the PR title is correct (See the comment at the top of this template)
• [x] The base branch is correct (See: Types of Branches)
• [x] The branch name follows the Branch Naming Conventions
• [x] The correct assignees and reviewers have been designated for this PR
• [x] The coding style follows the Coding Style Guide
• [x] All the related issues are associated with this PR
• [x] All criteria in the associated issues are met (please tick the checkboxes)
• [x] My changes do not generate new warnings or errors (especially in the console)

Reviewer Checklist:

• [ ] Double-check the "Assignee Checklist"
• [ ] The code follows the generic best practices and our Coding Style Guide
• [ ] The code is well-commented and easy to understand
• [ ] The UI changes accurately reflect the provided design

[nick-y-ito]

@kanta1207 cc @ShoeheyOt Thank you for the suggestion and giving me a new knowledge.

However, I tried it, but it did not bring the expected behavior. With the current code, the food data is re-fetched over again whenever the filter is updated. It causes the "referer" to be the "/foods" URL.

https://github.com/nishiki-tech/nishiki-frontend/assets/99148565/436e5192-872e-4fbe-a2bd-c04f390215d6

https://github.com/nishiki-tech/nishiki-frontend/assets/99148565/bfc37649-c91e-4fa3-8c1c-09073b2c8713

Here is why it happens:

Dynamic Nature of force-dynamic Components: By marking a component with force-dynamic, you're explicitly indicating that the component might need to update based on changes in the application's state or route. When you perform a route change with router.replace(), Next.js interprets this as a potential state change that could affect the force-dynamic components, causing them to re-render to ensure they reflect the latest application state.

https://chat.openai.com/share/e5429575-91aa-4585-9332-aa926bfd0085

Therefore, I have decided to keep it as it behaves for now. So, please review this PR with the current state.

[nick-y-ito]

Created the issue: #283 Mentioned this problem in #262

[nick-y-ito]

@kanta1207 Thank you for your review 😄