Create a new Next.js 15 application

Create a new, clean Next.js application with a few opinionated 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.

Next.js 15 requires React 19, while Sanity's React 19 support is still under development. If you have any issues with installation, consult our React 19 support guide.

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

npx create-next-app@15 layer-caker --typescript --tailwind --eslint --app --src-dir --import-alias="@/*" --turbopack

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
Turbopack

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.

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.3
  - 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 edit the src/app/page.tsx file 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 a src/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.

You have 5 uncompleted tasks in this lesson

0 of 5

Content-driven web application foundations

Create a new Next.js application

Update Tailwind CSS implementation