Resources

Workshop materials

• Overview: see the React workshop index
• Slides: open the deck here

Next.js

• Official Next.js docs (App Router): https://nextjs.org/docs
• Interactive course — Learn Next.js: https://nextjs.org/learn
• App Router fundamentals: https://nextjs.org/docs/app
• File-based routing: https://nextjs.org/docs/app/building-your-application/routing
• Data fetching and caching (server components): https://nextjs.org/docs/app/building-your-application/data-fetching
• Route Handlers (API routes in App Router): https://nextjs.org/docs/app/building-your-application/routing/route-handlers
• Server vs Client Components: https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns
• React (modern hooks, reference): https://react.dev/

Project setup and tooling

• Create a new app: https://nextjs.org/docs/app/api-reference/create-next-app
• TypeScript with Next.js: https://nextjs.org/docs/app/building-your-application/configuring/typescript
• Environment variables: https://nextjs.org/docs/app/building-your-application/configuring/environment-variables

Styling and UI

• Tailwind CSS with Next.js (guide): https://tailwindcss.com/docs/guides/nextjs
• shadcn/ui (Tailwind + Radix components): https://ui.shadcn.com/
• MUI component library: https://mui.com/
• Chakra UI component library: https://chakra-ui.com/
• Headless UI (unstyled accessible primitives): https://headlessui.com/

Forms and validation

• React Hook Form: https://react-hook-form.com/
• Zod (schema validation): https://zod.dev/
• Hook Form + Zod resolvers: https://react-hook-form.com/docs/useform/#resolver
• Server Actions (form handling on the server): https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations

State management

• Zustand (minimal global state): https://zustand-demo.pmnd.rs/
• Redux Toolkit (official Redux): https://redux-toolkit.js.org/

Images, fonts, and metadata

• next/image optimization: https://nextjs.org/docs/app/building-your-application/optimizing/images
• next/font (local & Google Fonts): https://nextjs.org/docs/app/building-your-application/optimizing/fonts
• Metadata & SEO: https://nextjs.org/docs/app/building-your-application/optimizing/metadata

Auth and security

• Auth.js (NextAuth.js): https://authjs.dev/
• Middleware (edge): https://nextjs.org/docs/app/building-your-application/routing/middleware

Animations

• Framer Motion: https://www.framer.com/motion/

Deployment & observability

• Vercel (best for Next.js): https://vercel.com/docs
• Preview environments & Git integration: https://vercel.com/docs/deployments/git
• Vercel Analytics: https://vercel.com/docs/analytics

Useful libraries for Next.js (curated)

• Tailwind CSS (utility-first styling)
• shadcn/ui (components), Headless UI, Radix Primitives
• TanStack Query or SWR (client-side data fetching)
• React Hook Form (+ Zod) for forms & validation
• Zustand or Redux Toolkit (state management)
• Framer Motion (animations)
• date-fns or dayjs (dates)
• Lucide or Heroicons (icons)

Go further

• Next.js examples repo: https://github.com/vercel/next.js/tree/canary/examples

Note: We use the App Router (Next.js 13+) patterns in this workshop. If you find older tutorials using the Pages Router or class components, prefer the resources above for modern, up-to-date approaches.