Nextjs on David Lang

Next.js App Router: Complete Migration Guide

Mon, 10 Jun 2024 00:00:00 +0000

Migrating from Pages Router to App Router unlocks RSC, layouts, and improved data fetching-but requires deliberate planning.

Folder Structure

app/
  layout.tsx      # Root layout
  page.tsx        # /
  blog/
    [slug]/
      page.tsx    # /blog/:slug
  api/
    hello/
      route.ts    # Route Handlers

Data Fetching

Replace getServerSideProps with async Server Components. Replace getStaticProps with fetch and revalidate options. Client data still uses SWR or React Query in Client Components.

Streaming AI Responses with OpenAI API in Next.js

Sat, 30 Mar 2024 00:00:00 +0000

Streaming improves chat UX by showing tokens as they are generated. Next.js Route Handlers make it straightforward to proxy streams securely.

Route Handler

// app/api/chat/route.ts
import OpenAI from 'openai';

export async function POST(req: Request) {
  const { messages } = await req.json();
  const openai = new OpenAI();

  const stream = await openai.chat.completions.create({
    model: 'gpt-4',
    messages,
    stream: true,
  });

  const encoder = new TextEncoder();
  const readable = new ReadableStream({
    async start(controller) {
      for await (const chunk of stream) {
        const text = chunk.choices[0]?.delta?.content || '';
        if (text) controller.enqueue(encoder.encode(text));
      }
      controller.close();
    },
  });

  return new Response(readable, {
    headers: { 'Content-Type': 'text/plain; charset=utf-8' },
  });
}

Client Consumption

Use fetch with a reader loop or libraries like Vercel AI SDK’s useChat for React state management.

React Server Components: The Future of Data Fetching

Sun, 20 Aug 2023 00:00:00 +0000

React Server Components (RSC) run on the server only-they never ship component logic to the client. That enables direct database access and smaller JavaScript bundles.

Server vs Client Components

// app/page.js - Server Component (default in App Router)
async function ProductList() {
  const products = await db.products.findMany();
  return (
    <ul>
      {products.map((p) => <li key={p.id}>{p.name}</li>)}
    </ul>
  );
}

Add 'use client' only when you need hooks, event handlers, or browser APIs.

Next.js: The Ultimate Guide to Server-Side Rendering

Wed, 20 Jan 2021 00:00:00 +0000

Next.js extends React with file-based routing, SSR, SSG, and API routes. Understanding when each rendering mode applies is essential for performance and SEO.

Rendering Modes

Static Generation (SSG) pre-renders at build time-ideal for marketing pages and blogs. Server-Side Rendering (SSR) renders on each request-best for personalized or frequently changing data. Client-Side Rendering (CSR) hydrates in the browser for highly interactive dashboards.

getServerSideProps Example

export async function getServerSideProps({ params }) {
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  const post = await res.json();
  return { props: { post } };
}

App Router (Preview)

Next.js 13+ introduces the App Router with React Server Components. Pages Router patterns remain widely used-know both as you maintain legacy and greenfield apps.