Opinionated, best-practices starter assistant for building with Next.js App Router. Remix to customize to your needs.
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
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
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.
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
No Data configured
npx -y @modelcontextprotocol/server-postgres ${{ secrets.continuedev/nextjs-app-router-assistant/anthropic/postgres-mcp/CONNECTION_STRING }}