Skip to content
TechMonster™

Frontend Advanced — Next.js

Advanced, production-grade Next.js across eight phases and a deployable capstone: routing and the server/client boundary, forms and validation, data fetching with React Query, a reusable UI library,…

Advanced, production-grade Next.js across eight phases and a deployable capstone: routing and the server/client boundary, forms and validation, data fetching with React Query, a reusable UI library, media and integrations, state management and performance, and real-world app features. Assumes the Frontend track's fundamentals; this is the follow-on for candidates targeting Next.js roles.

8 phases · 88 projects · v1.2.0

Target roles: Frontend Engineer, Next.js Developer, Full-Stack (frontend-leaning)

Stack: Next.js, TypeScript, React, Tailwind CSS

PHASE 1 · 10 projects

Production Setup & App Shell

Stand up a production Next.js app with the cross-cutting infrastructure every feature depends on.

  1. 01 · featured

    Next.js 14 App Router Setup

    Create a Next.js project with TypeScript, Tailwind CSS, and understand the App Router structure

    Next.js · TypeScript · React · Tailwind CSS

  2. 02 · featured

    Environment Configuration

    Set up multi-environment configuration with API endpoints and environment variables

    Next.js · TypeScript · React · Tailwind CSS

  3. 03 · featured

    API Client Setup

    Create an axios instance with interceptors, error handling, and base URL configuration

    Next.js · TypeScript · React · Tailwind CSS

  4. 04 · featured

    React Query Setup

    Configure TanStack Query (React Query) with persistence and devtools for efficient data fetching

    Next.js · TypeScript · React · Tailwind CSS

  5. 05 · featured

    Authentication Flow

    Implement Keycloak integration with protected routes and authentication state management

    Next.js · TypeScript · React · Tailwind CSS

  6. 06 · featured

    Layout System

    Build reusable layouts with header, footer, sidebar, and nested layouts

    Next.js · TypeScript · React · Tailwind CSS

  7. 07 · featured

    Error Boundaries

    Implement error handling with React Error Boundary and Next.js error pages

    Next.js · TypeScript · React · Tailwind CSS

  8. 08 · featured

    Loading States

    Create loading skeletons, spinners, and loading UI components

    Next.js · TypeScript · React · Tailwind CSS

  9. 09 · featured

    Toast Notifications

    Build toast notification system for success, error, and info messages

    Next.js · TypeScript · React · Tailwind CSS

  10. 10 · featured

    Theme Provider

    Implement dark/light theme with persistence and theme switching

    Next.js · TypeScript · React · Tailwind CSS

PHASE 2 · 10 projects

App Router & Routing

Master every App Router routing pattern and the server/client component boundary.

  1. 01 · featured

    Dynamic Routes

    Build [slug] dynamic pages with params and understand dynamic routing

    Next.js · TypeScript · React · Tailwind CSS

  2. 02 · featured

    Nested Dynamic Routes

    Create [category]/[location] nested routing with dynamic parameters

    Next.js · TypeScript · React · Tailwind CSS

  3. 03 · featured

    Catch-All Routes

    Implement [...slug] catch-all patterns for flexible URL structures

    Next.js · TypeScript · React · Tailwind CSS

  4. 04 · featured

    Route Groups

    Organize routes with (group) folders without affecting URL structure

    Next.js · TypeScript · React · Tailwind CSS

  5. 05 · featured

    Parallel Routes

    Build @parallel slot routing for simultaneous route rendering

    Next.js · TypeScript · React · Tailwind CSS

  6. 06 · featured

    Intercepting Routes

    Create modal routes with @modal for seamless user experience

    Next.js · TypeScript · React · Tailwind CSS

  7. 07 · featured

    Route Handlers

    Build API route handlers for server-side logic and API endpoints

    Next.js · TypeScript · React · Tailwind CSS

  8. 08 · featured

    Server Components

    Create server components with data fetching and server-side rendering

    Next.js · TypeScript · React · Tailwind CSS

  9. 09 · featured

    Client Components

    Build interactive client components with hooks and browser APIs

    Next.js · TypeScript · React · Tailwind CSS

  10. 10 · featured

    404 & Error Pages

    Implement custom not-found and error pages for better UX

    Next.js · TypeScript · React · Tailwind CSS

PHASE 3 · 10 projects

Forms & Validation

Build complex, validated forms with the patterns real apps require.

  1. 01 · featured

    Basic Form

    Create form with validation using react-hook-form and form handling

    Next.js · TypeScript · React · Tailwind CSS

  2. 02 · featured

    Multi-Step Form

    Build wizard-style multi-step form with progress indicator

    Next.js · TypeScript · React · Tailwind CSS

  3. 03 · featured

    File Upload

    Implement file upload with react-dropzone and preview functionality

    Next.js · TypeScript · React · Tailwind CSS

  4. 04 · featured

    Image Upload

    Build image upload with preview, crop, and resize capabilities

    Next.js · TypeScript · React · Tailwind CSS

  5. 05 · featured

    Form Validation

    Create comprehensive validation with zod schema validation

    Next.js · TypeScript · React · Tailwind CSS

  6. 06 · featured

    Dynamic Form Fields

    Build forms with add/remove fields dynamically

    Next.js · TypeScript · React · Tailwind CSS

  7. 07 · featured

    Form State Management

    Manage complex form state with Context API

    Next.js · TypeScript · React · Tailwind CSS

  8. 08 · featured

    Form Auto-save

    Implement draft saving functionality with debouncing

    Next.js · TypeScript · React · Tailwind CSS

  9. 09 · featured

    Form Submission

    Handle form submission with loading and error states

    Next.js · TypeScript · React · Tailwind CSS

  10. 10 · featured

    Form Reset & Clear

    Build form reset functionality and clear form data

    Next.js · TypeScript · React · Tailwind CSS

PHASE 4 · 15 projects

Data Fetching with React Query

Fetch, mutate, and cache server data the way production apps do.

  1. 01 · featured

    GET Request

    Fetch data with React Query useQuery hook

    Next.js · TypeScript · React · Tailwind CSS

  2. 02 · featured

    POST Request

    Create data with useMutation hook

    Next.js · TypeScript · React · Tailwind CSS

  3. 03 · featured

    PUT/PATCH Request

    Update data with mutations

    Next.js · TypeScript · React · Tailwind CSS

  4. 04 · featured

    DELETE Request

    Delete data with confirmation

    Next.js · TypeScript · React · Tailwind CSS

  5. 05 · featured

    Infinite Scroll

    Implement infinite scroll pagination

    Next.js · TypeScript · React · Tailwind CSS

  6. 06 · featured

    Search & Filter

    Build search with debounced API calls

    Next.js · TypeScript · React · Tailwind CSS

  7. 07 · featured

    Optimistic Updates

    Implement optimistic UI updates

    Next.js · TypeScript · React · Tailwind CSS

  8. 08 · featured

    Query Invalidation

    Handle cache invalidation after mutations

    Next.js · TypeScript · React · Tailwind CSS

  9. 09 · featured

    Parallel Queries

    Fetch multiple endpoints simultaneously

    Next.js · TypeScript · React · Tailwind CSS

  10. 10 · featured

    Dependent Queries

    Chain queries based on previous results

    Next.js · TypeScript · React · Tailwind CSS

  11. 11 · featured

    Query Retry Logic

    Implement retry on failure

    Next.js · TypeScript · React · Tailwind CSS

  12. 12 · featured

    Request Cancellation

    Cancel in-flight requests

    Next.js · TypeScript · React · Tailwind CSS

  13. 13 · featured

    API Error Handling

    Handle API errors gracefully

    Next.js · TypeScript · React · Tailwind CSS

  14. 14 · featured

    Query Loading States

    Show loading states during API calls

    Next.js · TypeScript · React · Tailwind CSS

  15. 15 · featured

    Refetch On Focus

    Auto-refetch when window regains focus

    Next.js · TypeScript · React · Tailwind CSS

PHASE 5 · 14 projects

Reusable UI Component Library

Build an accessible, reusable component library you can compose across the app.

  1. 01 · featured

    Button Component

    Build reusable button with variants

    Next.js · TypeScript · React · Tailwind CSS

  2. 02 · featured

    Input Component

    Create input with validation states

    Next.js · TypeScript · React · Tailwind CSS

  3. 03 · featured

    Select/Dropdown

    Build select component with search

    Next.js · TypeScript · React · Tailwind CSS

  4. 04 · featured

    Modal/Dialog

    Create modal with Radix UI

    Next.js · TypeScript · React · Tailwind CSS

  5. 05 · featured

    Tabs Component

    Build tabbed interface

    Next.js · TypeScript · React · Tailwind CSS

  6. 06 · featured

    Accordion

    Create collapsible accordion component

    Next.js · TypeScript · React · Tailwind CSS

  7. 07 · featured

    Tooltip

    Implement tooltip component

    Next.js · TypeScript · React · Tailwind CSS

  8. 08 · featured

    Popover

    Build popover component

    Next.js · TypeScript · React · Tailwind CSS

  9. 09 · featured

    Breadcrumbs

    Build breadcrumb navigation

    Next.js · TypeScript · React · Tailwind CSS

  10. 10 · featured

    Pagination Component

    Create pagination component

    Next.js · TypeScript · React · Tailwind CSS

  11. 11 · featured

    Data Table

    Build sortable, filterable table

    Next.js · TypeScript · React · Tailwind CSS

  12. 12 · featured

    Card Component

    Create card layout component

    Next.js · TypeScript · React · Tailwind CSS

  13. 13 · featured

    Badge/Tag

    Build badge component

    Next.js · TypeScript · React · Tailwind CSS

  14. 14 · featured

    Skeleton Loader

    Create skeleton loading states

    Next.js · TypeScript · React · Tailwind CSS

PHASE 6 · 15 projects

Media, Files & Integrations

Integrate media, file handling, and third-party capabilities production apps ship.

  1. 01 · featured

    Image Optimization

    Use Next.js Image component with optimization

    Next.js · TypeScript · React · Tailwind CSS

  2. 02 · featured

    Maps Integration

    Integrate Leaflet maps

    Next.js · TypeScript · React · Tailwind CSS

  3. 03 · featured

    PDF Generation

    Generate PDFs with jsPDF

    Next.js · TypeScript · React · Tailwind CSS

  4. 04 · featured

    Spreadsheet Export

    Export data to spreadsheet format

    Next.js · TypeScript · React · Tailwind CSS

  5. 05 · featured

    Print Functionality

    Implement print-friendly pages

    Next.js · TypeScript · React · Tailwind CSS

  6. 06 · featured

    Share Functionality

    Add social sharing buttons

    Next.js · TypeScript · React · Tailwind CSS

  7. 07 · featured

    Copy To Clipboard

    Implement copy functionality

    Next.js · TypeScript · React · Tailwind CSS

  8. 08 · featured

    Download Files

    Handle file downloads from API

    Next.js · TypeScript · React · Tailwind CSS

  9. 09 · featured

    Image Gallery

    Build image gallery with lightbox

    Next.js · TypeScript · React · Tailwind CSS

  10. 10 · featured

    Video Player

    Integrate video player component

    Next.js · TypeScript · React · Tailwind CSS

  11. 11 · featured

    Rich Text Editor

    Add rich text editing capability

    Next.js · TypeScript · React · Tailwind CSS

  12. 12 · featured

    Date Picker

    Build date picker component

    Next.js · TypeScript · React · Tailwind CSS

  13. 13 · featured

    Time Picker

    Create time selection component

    Next.js · TypeScript · React · Tailwind CSS

  14. 14 · featured

    Color Picker

    Implement color selection

    Next.js · TypeScript · React · Tailwind CSS

  15. 15 · featured

    Drag & Drop

    Build drag and drop interface

    Next.js · TypeScript · React · Tailwind CSS

PHASE 7 · 10 projects

State Management & Performance

Manage client state and optimize the app for production performance.

  1. 01 · featured

    Context API

    Manage global state with Context

    Next.js · TypeScript · React · Tailwind CSS

  2. 02 · featured

    Local Storage

    Persist data to localStorage

    Next.js · TypeScript · React · Tailwind CSS

  3. 03 · featured

    Session Storage

    Use sessionStorage for temporary data

    Next.js · TypeScript · React · Tailwind CSS

  4. 04 · featured

    URL State

    Manage state in URL query params

    Next.js · TypeScript · React · Tailwind CSS

  5. 05 · featured

    Debouncing

    Implement debounced search/input

    Next.js · TypeScript · React · Tailwind CSS

  6. 06 · featured

    Throttling

    Throttle scroll/resize events

    Next.js · TypeScript · React · Tailwind CSS

  7. 07 · featured

    Memoization

    Use React.memo and useMemo

    Next.js · TypeScript · React · Tailwind CSS

  8. 08 · featured

    Code Splitting

    Implement dynamic imports

    Next.js · TypeScript · React · Tailwind CSS

  9. 09 · featured

    Lazy Loading

    Lazy load components and images

    Next.js · TypeScript · React · Tailwind CSS

  10. 10 · featured

    Performance Monitoring

    Add performance metrics

    Next.js · TypeScript · React · Tailwind CSS

PHASE 8 · 4 projects

Real-World App Features

Assemble the patterns into the page types every product needs.

  1. 01 · featured

    Dashboard

    Build admin dashboard with charts and stats

    Next.js · TypeScript · React · Tailwind CSS

  2. 02 · featured

    Profile Management

    Create user profile with edit capabilities

    Next.js · TypeScript · React · Tailwind CSS

  3. 03 · featured

    Search Results

    Build search results page with filters

    Next.js · TypeScript · React · Tailwind CSS

  4. 04 · featured

    Detail View

    Create detail page with related items

    Next.js · TypeScript · React · Tailwind CSS

Next step

Request Frontend Advanced — Next.js

An advisor reviews the fit and confirms terms in writing. A request is not an acceptance and nothing is charged until you agree.