next-js-framework

name	next-js-framework
description	Build production-grade React apps with Next.js 14 App Router, Server Components, and Edge Runtime
sasmp_version	2.0.0
bonded_agent	01-react-fundamentals
bond_type	SECONDARY_BOND
input_validation	{"required_packages":[{"next":">=14.0.0"},{"react":">=18.0.0"}]}
output_format	{"code_examples":"tsx","test_template":"jest"}
error_handling	{"patterns":["error_boundary","not_found","loading_states"]}
observability	{"logging":"next_telemetry","metrics":["build_time","fcp","lcp"]}

Next.js Framework Skill

Overview

Master Next.js for building production-ready React applications with server-side rendering, static site generation, and API routes.

Learning Objectives

• Understand Next.js fundamentals
• Implement SSR and SSG
• Build API routes
• Optimize performance
• Deploy to production

Quick Start

Installation

npx create-next-app@latest my-app
cd my-app
npm run dev

File-Based Routing

Pages

pages/
├── index.js          → /
├── about.js          → /about
├── blog/
│   ├── index.js      → /blog
│   └── [slug].js     → /blog/:slug
└── api/
    └── hello.js      → /api/hello

Dynamic Routes

// pages/blog/[slug].js
import { useRouter } from 'next/router';

export default function BlogPost() {
  const router = useRouter();
  const { slug } = router.query;

  return <div>Post: {slug}</div>;
}

Data Fetching

Static Site Generation (SSG)

// pages/blog/[slug].js
export async function getStaticProps({ params }) {
  const post = await fetchPost(params.slug);

  return {
    props: { post },
    revalidate: 60 
  };
}

   () {
   posts =  ();

   {
    : posts.( ({ : { : post. } })),
    :  
  };
}

   () {
   ;
}