#server-components code explainers

javascript

import { cache } from 'react'
import { notFound } from 'next/navigation'
import { db } from '@/lib/db'

Deduping data fetches with React cache in Next.js

request-memoization data-fetching server-components

Intermediate 6 steps

javascript

import fs from 'node:fs/promises';
import path from 'node:path';
import { notFound } from 'next/navigation';
import matter from 'gray-matter';

Static MDX blog pages in Next.js

static-generation mdx frontmatter

Intermediate 7 steps

javascript

import { Suspense } from 'react';
import { searchProducts } from '@/lib/products';
import SearchInput from './search-input';

Streaming search results in a Next.js Server Component

server-components suspense streaming

Intermediate 8 steps

javascript

import { notFound } from 'next/navigation'
import { Suspense } from 'react'
import { getPostBySlug, getRelatedPosts } from '@/lib/posts'
import { RelatedPosts } from '@/components/related-posts'

Building a dynamic blog post page in Next.js

server-components dynamic-routing metadata

Intermediate 8 steps

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