The No-BS Solution for Enterprise-Ready Next.js Applications

Getting to Know Next.js

The first workshop in the series touches on all of the most important parts of working Next.js.

But instead of building yet another to-do app, you'll build a fully featured ChatGPT-like application. Here's what's covered:

• Project Setup & Deployment: Configure a Next.js application with TypeScript, ESLint, and Tailwind CSS that will be deployed continuously to Vercel.
• Routing & Layouts: Use the App Router to create application routes and layouts that inform data fetching and navigation.
• User Authentication: Implement user authentication and session management.
• Streaming AI Responses: Build a dynamic chat application that connects to OpenAI's API and streams responses in real-time.
• Database Integration: Store chat data in a Vercel Postgres database.

Styling Next.js Applications

There have been some great strides in how web applications are styled, but with the introduction of the App Router and React Server Components, there are new challenges to face. Client components, context issues, and the need for responsive design all come into play.

In this workshop module, you'll take a tour through some of the most popular options for building responsive, theme-ready UIs in Next.js. You'll practice with:

• CSS Modules: A classic (but sometimes verbose) way to style components.
• Tailwind CSS: The utility class approach has gained popularity, but requires some configuration steps and strategy to keep readable.
• StyleX: Meta's StyleX library provides a way for granular control over components, design tokens, and theming.
• Pigment CSS: Material UI is a popular component library, but isn't compatible with React Server Components. In response, the team created Pigment CSS, which increases performance while keeping styles organized.
• Emotion: While not the most modern approach, many applications still use Emotion for styling. Learn how to configure the library for supporting App Router applications.

Project Infrastructure

There are a variety of tools, frameworks, and processes that support modern Next.js applications– especially when working as part a team. This workshop module shares some suggestions and best practices for building a rock-solid foundation for your project's infrastructure. Here's the breakdown:

• Code Style & Consistency: Use tools like ESLint and Prettier to enforce style guides for your team.
• Component Organization: Learn to weigh the pros and cons of different project organization strategies for promoting reusability and easier navigation.
• Build a Component Library: Use Storybook for building and documenting components in isolation.
• Unit and End-to-End Testing: Implement tests with Jest, Vitest, Cypress, and Playwright for both client and server side.
• Monorepo Management: When your team works on multiple projects, Turborepo helps manage shared code and dependencies.
• Client & React Server Components: Go deeper into client components and RSCs, including strategies for handling context and data sharing.

Client and Server Communication

Once you've got a Next.js application deployed, there are still many considerations to make that will affect the performance and user experience of your application. This workshop module covers advanced Next.js topics for handling client and server communication:

• Caching Strategies: Understand and implement a variety of caching and revalidation options, including supporting API routes and using tags for precise cache control.
• File Uploads: Use server actions or API routes to handle both local and cloud-based file uploads, while seamlessly updating the UI.
• Choosing System Architecture: Explore different architectural patterns and their trade-offs for communicating between the client and server. Topics include server actions, Backend-for-Frontend, tokens, and more.
• Advanced Server Actions: Go beyond basic server actions and practice with advanced techniques through building a CDN simulator, intercepting client fetch requests, and building a data streaming solution.
• Granular Suspense: Implement a stock data app with fine-grained React Suspense loading states to provide responsive feedback for a better user experience.