Master Next.js with patterns

Become a better developer, one pattern at a time. Easy to understand, practical, and full of examples.

Patterns are self‑contained,
goal‑oriented and interactive tutorials

A straight-to-the-point article focused on real-world use cases, with resources for further exploration

Learn how to solve a precise problem. For instance, serving files from Next.js, or using client-only code in your React components.

An optional practical exercise with live preview in a webcontainer

Run a Next.js app in your browser, no install required.

A complete code demonstration

Why use many words when a little demo does the trick ? Each pattern comes with a realistic working implementation.

Patterns are for real-life.

NextPatterns covers a wide range of problems that developers face on a daily basis.

Client-only

Security

Testing

I18n

LLM

Hidden Gems

Pricing

NextPatterns is currently in beta and will stay free until a finished version is released.

New patterns will come up regularly. The course platform is already live, try it out !

NextPatterns is under active development. Enter your email to be informed when new patterns are released:

Do we really need a course for that? 🤔

StackOverflow is great, but...

A quick search with the keywords "window not defined next" on StackOverflow gives me... 4,334 results!! 😦

I did take the time to read a few dozen. Most answers miss the point that this issue may actually come from different causes, and that each cause needs its own solution.

LLMs are great, but...

LLMs only work with good prompts. They can hardly invent original patterns if a problem hasn't been solved.

Hi, my name is Eric Burel

And I am the author of the NextPatterns.dev course, pleased to meet you!

I am an engineer and teacher from France. You may know me from the State of JavaScript/CSS/HTML surveys that I help maintain.

A few years ago, I made the bet that Next.js would become a major technology, and I've never been so right in my life.

For several years, I've been teaching Next.js and web development to various organizations in France and abroad. This Next.js course is built upon the knowledge I've gathered both as a developer and a teacher.

I hope you'll enjoy following this course as much as I've enjoyed writing it!

Blog

Github

Twitter

More works from the author

NextPatterns tutorials are based on my research works on the topics of Next.js, Server-Side Rendering, and web development in general. These works have been published on renowned publications like Smashing Magazine and Prismic Blog.

Leveraging Server Context for Advanced Next.js Optimization Patterns

In this article, I focus on the concept of “server cache”. We learn why accessing this context or extending it is very important, and how it can be done in practice, through the example of Next.js 13’s new methods: “headers()”, “cookies()”, patched fetch(), and React 18 cache.

In this article, I focus on the concept of “server... Lire la suite

A New Pattern For The Jamstack: Segmented Rendering

Among all possible architectures for rendering a website, static rendering is the most performant. Yet, it’s only applicable to public, generic content. Or is it? In this article, we will push the boundaries of static rendering and learn how to apply it to personalized content. This new pattern is called “Segmented Rendering” and will change the Jamstack game forever.

Among all possible architectures for rendering a w... Lire la suite

Blazing Fast Next.js with React Server Components

Learn how to build blazingly fast websites with Next.js. Static rendering is often underrated: it’s very fast, very cheap, but hard to use in advanced scenarios. This course introduces students to personalization with static rendering by using React Server Components, the latest paradigm shift in React.

Learn how to build blazingly fast websites with Ne... Lire la suite

Frequently Asked Questions

Can I use NextPatterns to feed an LLM?

NextPatterns' format is optimal for training AIs: we provide an explanation in natural language coupled with code demonstrations. Reach out to us at contact@nextpatterns.dev for more info.

Is it free?

Patterns are a bit like blog articles. We plan to leave the most interesting patterns free and public forever. To support the project, we may add a paywall with a monthly read limit at some point, as well as premium-only resources.

Is it open to beginners?

Patterns are tailored for Next.js developers of any level. You can go even further by following the resources linked at the end of each pattern. We advise that you follow the official Next.js Learn tutorial.

Is it similar to Next.js documentation?

We love crafting original patterns that are not yet covered by Next.js documentation! This course is more focused on practical issues you face in specific real-life projects.