$devvkit learn --librarie next.js-guide

Next.js Guide

[react][ssr][ssg][framework]

JavaScript / TypeScript

Install

npx create-next-app@latest my-app --typescript --tailwind --eslint

Next.js is the recommended React framework. The App Router uses React Server Components by default.

Routes are defined by folder structure. Layouts persist, loading.tsx handles loading states.

Built-in image optimization, middleware, ISR, and Vercel-native deployments.

Routing

Page route— Create a page.

// app/about/page.tsx
export default function About() { return <h1>About</h1>; }

Dynamic route— Page with slug param.

// app/blog/[slug]/page.tsx
export default async function Post({ params }: { params: Promise<{slug:string}> }) {
  const { slug } = await params;
  return <h1>{slug}</h1>;
}

Layout— Shared layout.

// app/dashboard/layout.tsx
export default function Layout({ children }: { children: React.ReactNode }) {
  return <div><nav>...</nav><main>{children}</main></div>;
}

Data Fetching

Server fetch— Fetch in server component.

export default async function Users() {
  const users = await fetch('https://api.example.com/users').then(r => r.json());
  return <pre>{JSON.stringify(users, null, 2)}</pre>;
}

Static params— Generate static pages.

export async function generateStaticParams() {
  const posts = await fetch('https://api.example.com/posts').then(r => r.json());
  return posts.map((p: {slug:string}) => ({ slug: p.slug }));
}

Client Components

Client component— Opt into interactivity.

'use client';
import { useState } from 'react';
export function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c+1)}>{count}</button>;
}

API Routes

API route— Serverless API endpoint.

// app/api/users/route.ts
import { NextResponse } from 'next/server';
export async function GET() {
  const users = await db.findMany();
  return NextResponse.json(users);
}

Optimization

Metadata— Set page title.

import type { Metadata } from 'next';
export const metadata: Metadata = { title: 'About', description: 'Learn about us' };