# nextjs-frontend

> Next.js is a React framework for building full-stack web applications. This skill covers best practices for building modern, performant frontends with Next.js App Router, React Server Components, and API integration.

- Author: shyam sridhar
- Repository: shyamsridhar123/lu-lu-lu
- Version: 20260201221406
- Stars: 0
- Forks: 0
- Last Updated: 2026-02-06
- Source: https://github.com/shyamsridhar123/lu-lu-lu
- Web: https://mule.run/skillshub/@@shyamsridhar123/lu-lu-lu~nextjs-frontend:20260201221406

---

# Next.js Frontend Development

## Overview

Next.js is a React framework for building full-stack web applications. This skill covers best practices for building modern, performant frontends with Next.js App Router, React Server Components, and API integration.

## Key Features

- **App Router**: File-system based routing with layouts and loading states
- **Server Components**: React components that render on the server
- **Client Components**: Interactive components with React hooks
- **API Routes**: Backend endpoints alongside frontend code
- **Streaming**: Progressive rendering with Suspense
- **Image/Font Optimization**: Built-in performance optimizations

## When to Use

- Building modern web applications with React
- Creating full-stack applications with API routes
- Building landing pages and marketing sites
- Developing dashboards and admin panels
- Real-time applications with WebSockets integration

## Core Concepts

1. **App Router**: `/app` directory structure
2. **Server vs Client Components**: `"use client"` directive
3. **Data Fetching**: Server-side fetching and React Query
4. **Layouts**: Shared UI across routes
5. **Loading/Error States**: Built-in UI states
6. **Middleware**: Request/response interceptors

## Integration Points

- **FastAPI Backend**: REST API consumption
- **TanStack Query (React Query)**: Client-side data fetching
- **Tailwind CSS**: Utility-first styling
- **shadcn/ui**: Component library
- **Vercel**: Deployment platform