feat(not-found)!: implement 404 page with dynamic link behavior #20
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Overview :
Features :
useEffect Hook:
useEffect
checks if the previous page (document.referrer
) is within the same origin (domain) as the current page.backLink
is set todocument.referrer
(previous page), andlinkLabel
is set to'Return to Previous Page'
.backLink
remains'/'
to direct users to the home page, and the label stays'Go to login'
.App wide error handling :
NextJS supports a mechanism that lets one not-found page in the app folder catch errors throughout the application and sends back 404 error code.
( See Next Documentation on [not-found page](https://nextjs.org/docs/app/api-reference/file-conventions/not-found) )
Use Cases
Use Case 1: Internal Navigation to a 404 Page
Example: A user clicks a broken link within the app, such as a link pointing to a page that doesn’t exist.
Behavior: The link label on the 404 page reads "Return to Previous Page", allowing the user to return to the last visited page.
Demo:
A user is on the home page, clicks a broken link to a non-existent URL, and is redirected to not-found.tsx. They see "404 Page not found" along with a link saying "Return to Previous Page", which takes them back to the home page.
If the user navigates from Home > About > [non-existent page], the link will return them to the About page.
Screen.Recording.2024-11-14.at.12.50.41.mov
Use Case 2: Direct External Navigation to a 404 Page
Example: A user manually enters an incorrect URL as their initial page visit.
Behavior: The link label shows "Go to login", directing them to the default / page.
Demo:
A user enters a typo in the URL and lands on the 404 error page. They see "404 Page not found" with a link labeled "Go to login", which directs them to /.
Screen.Recording.2024-11-14.at.13.30.10.mov
Summary
The not-found.tsx component effectively handles 404 errors across the application, adapting its behavior based on the user’s navigation path, with meaningful link labels and streamlined client-only rendering.