### Setup Project with pnpm
Source: https://github.com/nishkohli96/nextjs-template/blob/main/README.md
Execute the setup script to install global tools, dependencies, and build the application.
```bash
sh setup.sh
```
--------------------------------
### Project Setup and Development Commands
Source: https://context7.com/nishkohli96/nextjs-template/llms.txt
Scripts for initial project setup, starting the development server, building for production, and linting.
```bash
# First-time setup (installs deps + builds)
sh setup.sh
```
```bash
# Start development server on http://localhost:3000
pnpm dev
```
```bash
# Production build + start
pnpm prod
```
```bash
# Lint and auto-fix all source files
pnpm lint
```
--------------------------------
### Start Development Server
Source: https://github.com/nishkohli96/nextjs-template/blob/main/README.md
Run this command to start the Next.js development server. Access the application at http://localhost:3000.
```bash
pnpm dev
```
--------------------------------
### Install Updates and Build
Source: https://github.com/nishkohli96/nextjs-template/blob/main/README.md
Automatically install all dependency updates and then build the application. This ensures the project is up-to-date and the build process is verified.
```bash
pnpm install-updates && pnpm build
```
--------------------------------
### Example Output of Dependency Updates
Source: https://context7.com/nishkohli96/nextjs-template/llms.txt
Illustrates the output format of `pnpm check-updates`, categorizing updates into Patch, Minor, and Major versions. Major updates require careful review.
```bash
# Preview grouped updates (does NOT modify package.json)
pnpm check-updates
# Apply all updates, reinstall, and verify the build
pnpm install-updates && pnpm build
# Example output of pnpm check-updates:
# Patch: eslint 9.38.0 → 9.39.1
# Minor: @mui/material 7.2.0 → 7.3.5
# Major: typescript 5.x → 6.x ← review carefully
```
--------------------------------
### Docker Build and Run Commands
Source: https://context7.com/nishkohli96/nextjs-template/llms.txt
Commands for building and running a Next.js application using Docker and Docker Compose. Includes instructions for manual Docker builds and runs.
```bash
# Build and run with Docker Compose
docker compose up --build
# Or manually with Docker
docker build -t my-nextjs-app .
docker run -p 3000:3000 my-nextjs-app
# App is available at http://localhost:3000
# Telemetry is disabled via ENV NEXT_TELEMETRY_DISABLED=1
```
--------------------------------
### Next.js Configuration (`next.config.ts`)
Source: https://context7.com/nishkohli96/nextjs-template/llms.txt
Configures `outputFileTracingRoot` for Docker builds and whitelists remote hostnames for `next/image`. Add additional hostnames as needed.
```ts
// next.config.ts
import type { NextConfig } from 'next';
const nextConfig: NextConfig = {
outputFileTracingRoot: __dirname, // Required for multi-stage Docker builds
images: {
remotePatterns: [
{ protocol: 'https', hostname: 'img.icons8.com' },
// Add more external image hosts here:
{ protocol: 'https', hostname: 'avatars.githubusercontent.com' },
],
},
};
export default nextConfig;
```
--------------------------------
### AppThemeProvider for Global Theme Context
Source: https://context7.com/nishkohli96/nextjs-template/llms.txt
A client-side provider managing theme state, persisting it in localStorage, and responding to OS preferences. Wrap your app root with this.
```tsx
// src/theme/index.tsx — already wired into src/app/layout.tsx
import { AppThemeProvider } from '@/theme';
// In your root layout:
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{/* All children have access to the MUI theme + ThemeContext */}
{children}
);
}
// Theme state is persisted in localStorage under the key "theme".
// On first visit, it falls back to the OS prefers-color-scheme value.
```
--------------------------------
### Theme Toggle Hook (`useThemeContext`)
Source: https://context7.com/nishkohli96/nextjs-template/llms.txt
Use this custom hook in client components to access the current theme mode and toggle between light and dark themes.
```tsx
'use client';
// src/components/theme-change-button/index.tsx
import { useThemeContext } from '@/theme';
import IconButton from '@mui/material/IconButton';
import DarkModeIcon from '@mui/icons-material/DarkMode';
import LightModeIcon from '@mui/icons-material/LightMode';
function MyThemeToggle() {
const { currentTheme, toggleTheme } = useThemeContext();
// currentTheme: 'light' | 'dark'
return (
{currentTheme === 'dark'
?
: }
);
}
```
--------------------------------
### App Bar Component (`AppBar`)
Source: https://context7.com/nishkohli96/nextjs-template/llms.txt
A static MUI AppBar for top navigation, including a logo, app title, and navigation links. Extend this component to add more navigation elements.
```tsx
// src/components/appbar/index.tsx
// Already exported from src/components/index.ts and used in layout.tsx.
// To add a nav link, extend the Toolbar:
import MuiAppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import Button from '@mui/material/Button';
import Link from 'next/link';
import { ThemeChangeButton } from '@/components';
export default function AppBar() {
return (
My App
);
}
```
--------------------------------
### MUI Theme Factory Configuration
Source: https://context7.com/nishkohli96/nextjs-template/llms.txt
Generates MUI theme objects for light and dark modes, including custom breakpoints and typography.
```tsx
// src/theme/theme.ts
import { createTheme } from '@mui/material/styles';
import { getTheme } from '@/theme/theme';
// Build the light theme
const lightTheme = createTheme(getTheme('light'));
// lightTheme.palette.primary.main === '#007aba'
// lightTheme.breakpoints.values.sm === 350
// Build the dark theme
const darkTheme = createTheme(getTheme('dark'));
// darkTheme.palette.primary.main === '#1976d2'
// darkTheme.palette.background.default === '#1a1919'
// Custom breakpoints applied to both modes:
// xs: 0, sm: 350, md: 768, lg: 1024, xl: 1400
```
--------------------------------
### Root Layout and Metadata Configuration
Source: https://context7.com/nishkohli96/nextjs-template/llms.txt
Defines global fonts, page metadata with a title template, and the provider tree for a Next.js application. Child pages only need to set their own title.
```tsx
// src/app/layout.tsx
import type { Metadata } from 'next';
// Child page sets only its own title:
export const metadata: Metadata = {
title: 'Dashboard', // renders as "Dashboard | NextJs App"
};
// The default (fallback) title is "NextJs App".
// Template pattern: "%s | NextJs App"
// Update defaultTitle in layout.tsx to rebrand globally:
const defaultTitle = 'My Product Name';
export const metadata: Metadata = {
title: { template: `%s | ${defaultTitle}`, default: defaultTitle },
description: 'My product tagline',
};
```
--------------------------------
### MUI Light and Dark Color Palettes
Source: https://context7.com/nishkohli96/nextjs-template/llms.txt
Defines semantic color tokens for light and dark themes. Swap or extend these to restyle the application globally.
```ts
// src/theme/palette.ts
// Override primary color for the light theme:
export const LightThemePalette = {
primary: { main: '#007aba' }, // brand blue
secondary: { main: '#ba68c9' }, // purple
success: { main: '#4caf50' },
warning: { main: '#ffb74d' },
error: { main: '#ef5350' },
info: { main: '#03a9f4' },
divider: '#9e9e9e',
background: { default: '#FFFFFF', paper: '#e0dfdc' },
text: { primary: '#121212', secondary: '#4c4c4c' },
};
export const DarkThemePalette = {
primary: { main: '#1976d2' },
secondary: { main: '#f50057' },
success: { main: '#4ad953' },
warning: { main: '#ffa726' },
error: { main: '#c62828' },
info: { main: '#80d8ff' },
divider: '#4c4c4c',
background: { default: '#1a1919', paper: '#2b2b2b' },
text: { primary: '#f8f7ff', secondary: '#f6e4df' },
};
```
--------------------------------
### Docker Compose for Next.js Client and API
Source: https://context7.com/nishkohli96/nextjs-template/llms.txt
Defines Docker services for a Next.js client and an Express API, enabling containerized full-stack development. The NEXT_PUBLIC_API_URL environment variable connects the client to the API service.
```yaml
services:
next-client:
image: my-org/next-app
build:
context: .
dockerfile: ./Dockerfile
ports:
- '3000:3000'
environment:
- NEXT_PUBLIC_API_URL=http://api:4000
api:
image: my-org/express-api
ports:
- '4000:4000'
```
--------------------------------
### Docker Compose Configuration
Source: https://context7.com/nishkohli96/nextjs-template/llms.txt
Basic Docker Compose configuration for a Next.js application, mapping port 3000. This can be extended with environment variables or additional services.
```yaml
```
--------------------------------
### Check for Dependency Updates
Source: https://github.com/nishkohli96/nextjs-template/blob/main/README.md
Use npm-check-updates to identify and list available dependency updates, grouped by type (major, minor, patch).
```bash
pnpm check-updates
```
--------------------------------
### Theme Change Button Component
Source: https://context7.com/nishkohli96/nextjs-template/llms.txt
A standalone icon button that uses `useThemeContext` to toggle themes. It displays a sun or moon icon and a tooltip for user interaction.
```tsx
'use client';
// Ready to use — just import from the barrel export:
import { ThemeChangeButton } from '@/components';
// In any page or layout:
export default function Header() {
return (
{/* Renders: moon icon (dark mode active) or sun icon (light mode active) */}
{/* Tooltip: "Switch to light theme" or "Switch to dark theme" */}
);
}
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.