feat(app): add global 404 not-found page #281
Conversation
|
@megh-bari is attempting to deploy a commit to the cloudec31-gmailcom's projects Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughAdds a new Next.js app router 404 page at apps/web/app/not-found.tsx, exporting page metadata and a default NotFound component that renders a centered 404 UI with title, description, and a Button-as-Link back to “/”, using lucide-react’s Undo2 icon. No data fetching; static render. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant U as User
participant R as Next.js App Router
participant P as not-found.tsx (NotFound)
U->>R: Request unknown route
R-->>P: Render 404 page
Note over P: Static render with metadata<br/>Title + Description + "Go Back Home"
P-->>U: 404 HTML response
U->>R: Click "Go Back Home" ("/")
R-->>U: Navigate to Home
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
Tip 🔌 Remote MCP (Model Context Protocol) integration is now available!Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats. ✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
apps/web/app/not-found.tsx (3)
5-9: Type the Metadata object and consider adding robots noindex; verify it’s honored in your Next.js version.
- Add a type to catch shape regressions and include
robots: { index: false }(optional; 404 status already prevents indexing).- Metadata in
not-found.tsxis supported, but some Next 15.2.x dev builds had a metadata rendering regression; validate in production or a recent stable.Apply inside this file:
+import type { Metadata } from "next"; -export const metadata = { +export const metadata: Metadata = { title: "404 | Page Not Found - Call", description: "Oops! The page you’re looking for isn’t available. Head back to the homepage.", + robots: { index: false }, };Notes:
- Root
app/not-foundhandles unmatched URLs globally. (nextjs.org)- Metadata support for
not-foundexists (historically tracked/fixed), but a dev-only bug affected certain 15.2.x versions; confirm your version behavior. (github.com)
.
13-30: Add a landmark for accessibility by usingProvide a main landmark for screen readers.
- <div className="min-h-screen flex bg-background items-center justify-center px-6"> + <main className="min-h-screen flex bg-background items-center justify-center px-6" role="main"> <div className="text-center max-w-md"> <h1 className="text-6xl font-bold text-primary mb-6">404</h1> <p className="text-muted-foreground"> Looks like you've wandered off the call. The page you're trying to reach - doesn't exist or maybe it's on mute. + doesn't exist or maybe it's on mute. </p> <p className="text-muted-foreground mb-8"> Let's get you back on track. </p> <Button asChild> <Link href="/" className="flex items-center gap-2"> <Undo2 className="h-4 w-4" aria-hidden="true" focusable="false" /> <span>Go Back Home</span> </Link> </Button> </div> - </div> + </main>
18-18: Remove trailing whitespace.There are extra spaces at the end of the line; most linters flag this.
- doesn't exist or maybe it's on mute. + doesn't exist or maybe it's on mute.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
apps/web/app/not-found.tsx(1 hunks)
🔇 Additional comments (2)
apps/web/app/not-found.tsx (2)
11-32: Global 404 wiring looks correct.Placing
app/not-found.tsxat the app root provides a branded 404 for unmatched routes across the app. Implementation is clean and server-component friendly.
24-28: Accessibility/readability is good here.Using
Button asChildpreserves correct link semantics; the Undo2 icon is decorative witharia-hidden, and the link text is clear.
|
thanks again for another Pr @megh-bari instead of redirecting the user back to the thanks! |
|
Hi! @code-env Thanks for the feedback on the 404 page enhancement. To implement the smart routing logic you suggested, I need to understand a few things about the current authentication setup:
Is it
|
2 participants
Description
Added a global
not-found.tsxpage underapps/web/app.This ensures that whenever a user navigates to a non-existent route, they’re shown a branded 404 experience instead of the default blank/error page of next.js.
title+description) for better SEO.Fixes: N/A
Checklist
pnpm buildorpnpm lintwith no errorsScreenshots or UI Changes (if applicable)
Before:
No dedicated 404 page → fallback error screen.
After:
A centered, branded page with:
Related Issues
N/A
Notes for Reviewer
Summary by CodeRabbit