---
description: Create branded error pages
---
1. **Create Not Found**:
- Create
2. **Create Error Page**:
- Create
3. **Pro Tips**:
- Add a search bar or helpful links to your 404 page to keep users engaged.
description: Create branded error pages
---
1. **Create Not Found**:
- Create
src/app/not-found.tsx.import Link from 'next/link';
export default function NotFound() {
return (
<div>
<h2>Not Found</h2>
<p>Could not find requested resource</p>
<Link href="/">Return Home</Link>
</div>
);
}2. **Create Error Page**:
- Create
src/app/error.tsx for generic server errors.3. **Pro Tips**:
- Add a search bar or helpful links to your 404 page to keep users engaged.
By Antigravity Team
How to Use This Workflow
Option A: Project-Specific (Recommended)
- Click "Download" above
- In your project, create the directory:
.agent/workflows/ - Save the file as
create-custom-404-500-error-pages-nextjs.md - In Antigravity, type
/create_custom_404_500_error_pages_nextjsor just describe what you want to do
Related Workflows
Setup Internationalization (i18n)
i18nNext.jsLocalization
--- description: Configure next-intl for multi-language support --- 1. **Install next-intl**: - Install the library. // turbo - Run `npm install next-intl` 2. **Create Messages**: - Create `messages/en.json` and `messages/es.json`. ```json { "Index": { "title": "Hello...
Scaffold New Component
ReactProductivityScaffolding
--- description: Quickly generate a new React component structure --- 1. **Create Directory**: - Create a folder for the component. // turbo - Run `mkdir -p src/components/NewComponent` 2. **Create Component File**: - Create the main file with boilerplate code. // turbo - Run `pr...
Implement Dark Mode
UITailwindTheming
--- description: Add dark mode support using next-themes --- 1. **Install next-themes**: - Install the library. // turbo - Run `npm install next-themes` 2. **Add Provider**: - Wrap your app in `app/layout.tsx`. ```tsx import { ThemeProvider } from 'next-themes'; export def...
Recommended Rules
View more rules →Next.js App Router Best Practices
Next.jsApp RouterRouting
You are an expert in Next.js App Router. Key Principles: - Use Server Components by default - Use Client Components only when necessary (interactivit...
Next.js Performance Optimization
Next.jsPerformanceOptimization
You are an expert in Next.js performance optimization. Key Principles: - Optimize images and fonts - Minimize client-side JavaScript - Use proper cac...
Next.js Authentication & Authorization Expert
Next.jsAuthenticationSecurity
You are an expert in Next.js authentication and authorization. Key Principles: - Use Auth.js (NextAuth.js) for authentication - Implement server-side...