Comprehensive guide for building Next.js 15.5+ applications with Firebase, including App Router, TypeScript, MUI v7, Turbopack production builds (beta), and Firebase services. Use when configuring Next.js projects, troubleshooting errors, setting up Firebase integration, working with App Router patterns, or implementing best practices for Next.js + Firebase development.
This skill provides comprehensive guidance for building modern Next.js 15.5+ applications with Firebase, TypeScript, Material-UI v7, and Node.js.
Use this skill when:
# Create new project (Next.js 15.5+)
npx create-next-app@latest my-app --typescript --eslint --src-dir --app
# Development
npm run dev # Start dev server (webpack by default)
npm run dev --turbopack # Start with Turbopack (faster, optional)
npm run dev -- -p 4000 # Start on custom port
# Type checking & linting
tsc --noEmit # Check types
npx eslint . # Run ESLint CLI directly (next lint deprecated in 15.5)
# Generate types for routes (NEW in 15.5)
npx next typegen # Generate route types without full build
# Build & production
npm run build # Create production build (webpack - RECOMMENDED)
npm run start # Start production server
⚠️ Important: Turbopack production builds (--turbopack flag) are in beta and NOT RECOMMENDED for production use yet. Use webpack (default) for builds.
The skill includes comprehensive reference documentation. Read these files as needed:
cli-commands.md - Complete Next.js CLI reference
create-next-app.md - Project initialization guide
next-config.md - Configuration reference
typescript.md - TypeScript integration guide
turbopack.md - Turbopack bundler reference
best-practices.md - Comprehensive development guide
troubleshooting.md - Common errors and solutions
Create project:
npx create-next-app@latest my-app \
--typescript \
--eslint \
--src-dir \
--app \
--turbopack
Install Firebase and MUI:
npm install firebase # Firebase SDK v12.x
npm install @mui/material @mui/icons-material @emotion/react @emotion/styled
Configure next.config.ts:
Set up Firebase:
.env.local with Firebase credentialssrc/lib/firebase/config.tsConfigure MUI:
Server Components (default):
Client Components:
Key principle: Use Server Components by default, only add 'use client' when needed (interactivity, hooks, Firebase Auth).
Authentication:
useAuth hook for auth stateFirestore:
When encountering errors, follow this process:
Identify error category:
Apply common solutions:
rm -rf .next node_modules && npm installEnable debug mode if needed:
NEXT_DEBUG=1 npm run dev
npm install -g firebase-toolsfirebase loginfirebase init hostingnpm run buildfirebase deploy --only hostingSee best-practices.md - "Deployment to Firebase" for detailed steps.
Essential for Firebase + MUI setup:
import type { NextConfig } from 'next'
const nextConfig: NextConfig = {
reactStrictMode: true,
transpilePackages: [
'@mui/material',
'@mui/system',
'@mui/icons-material',
],
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'firebasestorage.googleapis.com',
},
],
},
}
export default nextConfig
Configure path aliases and includes:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
},
"include": [
"next-env.d.ts",
".next/types/**/*.ts",
"**/*.ts",
"**/*.tsx"
]
}
Do:
Don't:
Read reference files progressively based on task needs:
For setup tasks:
For development tasks:
For troubleshooting:
For CLI operations:
| Task | Reference | Section |
|---|---|---|
| Create new project | create-next-app.md | Usage Examples |
| Set up Firebase | best-practices.md | Firebase Configuration |
| Configure MUI v7 | best-practices.md | Material-UI Integration |
| Fix hydration error | troubleshooting.md | Runtime Errors |
| Set up auth | best-practices.md | Firebase Authentication |
| Configure next.config | next-config.md | Firebase-Specific Config |
| Enable Turbopack | turbopack.md | Getting Started |
| Fix build error | troubleshooting.md | Build Errors |
| Deploy to Firebase | best-practices.md | Deployment to Firebase |
--turbopack flag (optional, faster HMR)next lint command is deprecated (use ESLint CLI directly)next typegen command is new in 15.5 (generates types without full build)If you encounter issues not covered in the troubleshooting guide:
NEXT_DEBUG=1 npm run dev