Code Explainers

Code explainers tagged #client-components

javascript
export default function DashboardLayout({ children, analytics, notifications }) {
  return (
    <div className="flex h-screen overflow-hidden">
      <Sidebar />

Parallel routes in a Next.js layout

parallel-routes layouts app-router
Intermediate 8 steps
javascript
'use client';
 
import { useOptimistic, useTransition } from 'react';
import { toggleLike } from '@/app/actions/likes';

Optimistic like buttons in Next.js

optimistic-ui react-hooks server-actions
Intermediate 7 steps