Next.js 13 with RSC, Windstitch, and Turbopack

Features

of this template

tl;dr

This is a template to get you started with Next.js 13, RSC (React Server Components), Windstitch (Tailwind CSS in React), and Turbopack. It uses colaction to organize your code (see /modules) and uses as much new features from Next.js 13 as possible.

Next.js 13
with `/app`

Next.js 13 introduces a new /app directory that is intended to contain all routes as well as meta data, layout definitions, and other colocated files. This is a great way to organize your application and is a big improvement over the previous approach.

Revalidation of
React Components

With Next.js 13, you can now revalidate React (Server) components by simply adding arevalidate property as 2nd argument to the fetch function inside the RSC.

Windstitch
for Tailwind

Windstitch is a library that allows you to use Tailwind classes in your React components. It replaces the need for a CSS-in-JS library like Emotion or Styled Components and is compatible with RSC. Windstitch has a styled-like API and supports polymorphic components.

Radix UI
Colors

The color palette designed by Radix UI is a great selection to use in your project. Radix made sure they are accessible when combined and also has a guide what colors to use together. To integrate Radix UI Colors with Tailwind, I added windy-radix-palette to this template.

Windstitch
& VS Code

To improve the DX of Windstitch, this template also includes a custom VS Code settings.json file. This extension allows you to use Tailwind classes in your CSS-in-JS files and provides autocompletion for them. It is not perfect yet, but it is still a great improvement over the default experience.