Create a new Next.js 15 application - Content-driven web application foundations

Create a new, clean Next.js application with a few opinionated technology choices for TypeScript and Tailwind CSS.

There are many technology choices available to make a web application. So why was Next.js chosen for this course?

JavaScript is the most popular programming language for writing server and client web applications.
React is the most popular library for writing JavaScript-powered applications.
By a large margin, Next.js is the most popular meta-framework for React.
Next.js also has a large community following for extra support and useful utilities.
It also has an excellent deployment developer experience with Vercel.
Best of all, Next.js has a tight integration with Sanity.

In short, if your day job involves building web applications on a developer team, there's a good chance you're doing it with Next.js.

Next.js is not without its challenges. It typically operates at the leading edge of React, so you may interact with React features not yet considered stable. Some architectural decisions, such as caching, can cause confusion. However, this course aims to demystify some of these challenges.

This course is written on the bleeding edge of significant changes in the React ecosystem. Currently:

Next.js 15 requires React 19 and is only available as a release candidate.
Sanity's React 19 support is still under development.

This course will be updated as this changes. Just note that the installation steps for now are a little unusual. Fortunately, we can still proceed with a few extra configuration options.

Run the following command to create a new Next.js 15 application:

npx create-next-app@rc layer-caker --typescript --tailwind --eslint --app --src-dir --no-turbo --import-alias "@/*"

The options in the command above configure your app to use:

TypeScript
Tailwind CSS
eslint
The App router
A src directory for your application's files
The default import alias for your application's files

These are all the default settings for a new Next.js 15 application. The flags in the command above save you from having to select these options.

You may modify the command above to make different choices, but the following lessons contain code snippets that assume these are the settings you used.

Update package.json to include these lines to require npm as your package manager and override any dependencies that still target React 18

package.json

"packageManager": "npm@10.5.2",
"overrides": {
  "react": "$react",
  "react-dom": "$react-dom"
}

If you'd prefer another package manager, see Sanity's React 19 support page for more examples.

Run the development server

npm run dev

Your app should start up in the terminal, showing that you are running Next.js 15

> layer-caker@0.1.0 dev
> next dev

  ▲ Next.js 15.0.0-rc.0
  - Local:        http://localhost:3000

Open http://localhost:3000. You should see the default home page for a new Next.js application like the one below:

As recommended, you can change the src/app/page.tsx file now and see updates instantly. In the following lessons, you'll be given code examples to update this home page route and create new pages.

The Next.js starter has fonts and styles you don't need for this course, so you'll remove them for simplicity.

Update layout.tsx to remove custom fonts

src/app/layout.tsx

import "@/app/globals.css";

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

Update globals.css to remove anything other than Tailwind's directives

src/app/globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Update tailwind.config.ts to remove the custom theme – and search the sanity directory for class names

tailwind.config.ts

import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/sanity/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {},
  plugins: [],
};
export default config;

The app in development should still look mostly the same. You'll add more content and styling in the following lessons.

You now have a Next.js application with Tailwind CSS for styling. However, it lacks content management, so the next step is to set up a Sanity account and initialize Sanity Studio inside your Next.js project.

Content-driven web application foundations

Create a new Next.js application

Update Tailwind CSS implementation

Courses in the "Work-ready Next.js" track