continuedev/nextjs-app-router-assistant icon
public
Published on 4/4/2025
Next.js App Router Assistant

Opinionated, best-practices starter assistant for building with Next.js App Router. Remix to customize to your needs.

Rules
Prompts
Models
Context
anthropic Claude 3.7 Sonnet model icon

Claude 3.7 Sonnet

anthropic

200kinput·8.192koutput
anthropic Claude 3.5 Sonnet model icon

Claude 3.5 Sonnet

anthropic

200kinput·8.192koutput
mistral Codestral model icon

Codestral

mistral

voyage voyage-code-3 model icon

voyage-code-3

voyage

voyage Voyage AI rerank-2 model icon

Voyage AI rerank-2

voyage

gemini Gemini 2.5 Pro model icon

Gemini 2.5 Pro

gemini

1048kinput·65.536koutput
The following is the folder structure for my project:

/app: Contains all the routes, components, and logic for the application
/app/lib: Contains functions used in the application, such as reusable utility functions and data fetching functions.
/app/ui: Contains all the UI components for the application, such as cards, tables, and forms
/public: Contains all the static assets for the application, such as images
I am using the Next.js App Router v15.x.x
I am using Next.js, along with the following tools:
- Vercel
- TypeScript
- Zod
- shadcn
- Tailwind
- clsx
- PostgreSQL
- pnpm
Next.jshttps://nextjs.org/docs/app
Vercel AI SDK Docshttps://sdk.vercel.ai/docs/
Reacthttps://react.dev/reference/
Zodhttps://zod.dev/
Vercelhttps://vercel.com/docs
Vercel Edge Runtimehttps://edge-runtime.vercel.app/
shadcn/uihttps://ui.shadcn.com/docs
Tailwind CSShttps://tailwindcss.com/docs/installation
Postgres docshttps://www.postgresql.org/docs/17/index.html

Prompts

Learn more
Next.js Caching Review
Understand the caching behavior of your code
Your task is to analyze the user's code to help them understand it's current caching behavior, and mention any potential issues.
Be concise, only mentioning what is necessary.
Use the following as a starting point for your review:

1. Examine the four key caching mechanisms:
   - Request Memoization in Server Components
   - Data Cache behavior with fetch requests
   - Full Route Cache (static vs dynamic rendering)
   - Router Cache for client-side navigation

2. Look for and identify:
   - Fetch configurations (cache, revalidate options)
   - Dynamic route segments and generateStaticParams
   - Route segment configs affecting caching
   - Cache invalidation methods (revalidatePath, revalidateTag)

3. Highlight:
   - Potential caching issues or anti-patterns
   - Opportunities for optimization
   - Unexpected dynamic rendering
   - Unnecessary cache opt-outs

4. Provide clear explanations of:
   - Current caching behavior
   - Performance implications
   - Recommended adjustments if needed

Lastly, point them to the following link to learn more: https://nextjs.org/docs/app/building-your-application/caching
Next.js Optimizations Review
Check for any potential optimizations that are missing in your code
Please review my Next.js code with a focus on optimization areas.

Use the below as a starting point, but consider any other potential areas for improvement.

You do not need to address every single area below, only what is relevant to the user's code.

1. Images: Check for proper usage of next/image, responsive sizing, priority loading for LCP, and correct image formats.

2. Font Loading: Verify next/font implementation, font subsetting, and proper loading strategies.

3. Component Loading: Identify opportunities for lazy loading using next/dynamic, especially for client components and heavy libraries.

4. Metadata: Ensure proper metadata implementation for SEO using either config-based or file-based approaches.

5. Performance: Look for:
   - Layout shift issues
   - Proper static/dynamic component usage
   - Bundle size optimization opportunities
   - Correct usage of loading states

Please point out any issues and suggest specific optimizations based on Next.js best practices.
Next.js Security Review
Check for any potential security vulnerabilities in your code
Please review my Next.js code with a focus on security issues.

Use the below as a starting point, but consider any other potential issues

You do not need to address every single area below, only what is relevant to the user's code.

1. Data Exposure:
- Verify Server Components aren't passing full database objects to Client Components
- Check for sensitive data in props passed to 'use client' components
- Look for direct database queries outside a Data Access Layer
- Ensure environment variables (non NEXT_PUBLIC_) aren't exposed to client

2. Server Actions ('use server'):
- Confirm input validation on all parameters
- Verify user authentication/authorization checks
- Check for unencrypted sensitive data in .bind() calls

3. Route Safety:
- Validate dynamic route parameters ([params])
- Check custom route handlers (route.ts) for proper CSRF protection
- Review middleware.ts for security bypass possibilities

4. Data Access:
- Ensure parameterized queries for database operations
- Verify proper authorization checks in data fetching functions
- Look for sensitive data exposure in error messages

Key files to focus on: files with 'use client', 'use server', route.ts, middleware.ts, and data access functions.
Your task is to create a new page. Keep the following guidelines in mind.

- Add 'use client' if using hooks/interactivity
- Export a default React component
- Add layout.tsx in same folder if shared UI is needed for nested routes.
- Add loading.tsx in same folder if there is any loading state needed and build it with skeleton-style loaders

Context

Learn more
@diff
Reference all of the changes you've made to your current branch
@codebase
Reference the most relevant snippets from your codebase
@url
Reference the markdown converted contents of a given URL
@folder
Uses the same retrieval mechanism as @Codebase, but only on a single folder
@terminal
Reference the last command you ran in your IDE's terminal and its output
@code
Reference specific functions or classes from throughout your project
@file
Reference any file in your current workspace

No Data configured

MCP Servers

Learn more

Postgres

npx -y @modelcontextprotocol/server-postgres ${{ secrets.continuedev/nextjs-app-router-assistant/anthropic/postgres-mcp/CONNECTION_STRING }}