Code Explainers

Code explainers tagged #server-components

javascript 
import Link from "next/link";
import { prisma } from "@/lib/prisma";
 
const PAGE_SIZE = 20;

A searchable, paginated table as a Next.js Server Component

server-components pagination search
Intermediate 6 steps
javascript 
import { Suspense } from 'react';
import { getProducts } from '@/lib/api/products';
import { formatPrice } from '@/lib/format';
 

Streaming a product list with Suspense in Next.js

server-components suspense streaming
Intermediate 8 steps
javascript 
import { notFound } from 'next/navigation';
 
const PER_PAGE = 24;
const SORT_OPTIONS = ['relevance', 'price-asc', 'price-desc', 'newest'];

Parsing search params in a Next.js page

input-validation query-params pagination
Intermediate 10 steps