Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(not-found)!: implement 404 page with dynamic link behavior #20

Merged
merged 3 commits into from
Nov 15, 2024

Conversation

ishaan000
Copy link
Collaborator

@ishaan000 ishaan000 commented Nov 7, 2024

Overview :

  • File Creation: Added not-found.tsx to handle and display 404 errors across the application.
  • App-wide 404 Handling: Placing not-found.tsx directly in the app folder enables it to catch all 404 errors throughout the app.
  • SSR Disabled: Disabled server-side rendering in not-found.tsx to improve user experience and resolve client-only errors, such as those related to document. (See Stack Overflow reference)

Features :
useEffect Hook:

  • When the component mounts, useEffect checks if the previous page (document.referrer) is within the same origin (domain) as the current page.
  • If the previous page is within the same origin, backLink is set to document.referrer (previous page), and linkLabel is set to 'Return to Previous Page'.
  • Otherwise, the 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.

- Create not-found.tsx to display 404 errors.
- Disable SSR in not-found.tsx for better UI experience.
- Add dynamic Link atom to not-found.tsx for navigation.
- Add testing suite for not-found.tsx
@ishaan000 ishaan000 added dev Related to development environment page Related to a page labels Nov 7, 2024
@ishaan000 ishaan000 self-assigned this Nov 7, 2024
@hiyaryan hiyaryan added feature Related to new feature patch Related to a patch release and removed dev Related to development environment labels Nov 12, 2024
- Enhance 404 page navigation by dynamically setting `backLink` based on document referrer.
- Update heading styles, setting "404" as an `h1` and the descriptive text as an `h2'.
- Add `ariaLabel` for improved accessibility on the navigation link.
- Refactor the code to use `useEffect` to manage `backLink`, `linkLabel`, and `ariaLabel` setup.
- Update tests to mock `useRouter` and validate new navigation behaviors.
Copy link
Member

@hiyaryan hiyaryan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great work @ishaan000! Thank you for the awesome description. Everything looks good to me!

@hiyaryan hiyaryan changed the title feat(not-found): implement 404 page with dynamic link behavior feat(not-found)!: implement 404 page with dynamic link behavior Nov 15, 2024
@hiyaryan hiyaryan merged commit f5105d0 into main Nov 15, 2024
1 check passed
@hiyaryan hiyaryan deleted the 404-not-found branch November 15, 2024 01:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature Related to new feature page Related to a page patch Related to a patch release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants