Retour aux articles
Friday, December 13, 2024142 vues6

Getting Started with Next.js 15: Complete Guide

Mike Codeur

Astuces
Next

Next.js 15 is the latest version of this powerful framework that allows you to build modern web applications with optimal user experiences. In this article, we’ll guide you through the essential steps to get started with Next.js 15, whether you’re a beginner or an experienced developer.


Why Choose Next.js 15?

Next.js is known for its rich ecosystem and flexibility. Here are some highlights of version 15:

  • Server Components: Optimize performance with server-side rendering.
  • App Router: More intuitive and powerful routing management.
  • Streaming Rendering: Faster and smoother page rendering.
  • Simplified Integration with TypeScript, Tailwind CSS, and other modern tools.

Prerequisites

Before you start, ensure you have the following:

  1. Node.js: Install the latest LTS version.
  2. npm or Yarn: Included with Node.js; you can also use pnpm if you prefer.
  3. A Code Editor: Visual Studio Code is highly recommended for its extensions.

Create Your Project with create-next-app

The easiest way to get started with Next.js 15 is by using the create-next-app command. Here’s how:

Step 1: Run the Command

In your terminal, run the following command:

BASH
npx create-next-app@latest my-next-app

If you prefer Yarn or pnpm, use these commands:

BASH
yarn create next-app my-next-app
BASH
pnpm create next-app my-next-app

Step 2: Configure Your Project

During the setup process, you’ll be prompted to answer several questions:

  • TypeScript: Enable it for robust typing.
  • ESLint: Add ESLint to maintain code quality.
  • Tailwind CSS: Integrate Tailwind for quick and efficient styling.
  • Src Directory: Organize your code with a src folder.
  • App Router: Enable this option to fully leverage the modern features of Next.js 15.

Once your choices are confirmed, the dependencies will be installed automatically.


Start the Development Server

Once your project is created, navigate to the project folder and start the server:

BASH
cd my-next-app
npm run dev

You’ll see a URL, usually http://localhost:3000, to access your application.


Basic Project Structure in Next.js

Here’s what the initial structure looks like:

BASH
my-next-app/
├── src/
   ├── app/
   ├── page.js
   └── layout.js
   ├── styles/
   └── components/
├── public/
└── package.json
  • app/: Contains your routes and rendering logic.
  • styles/: Stores your global CSS files.
  • components/: Directory for reusable components.
  • public/: Folder for static files.

Add Pages

With the App Router, creating a page is simple. Add a page.js file in a subfolder of app:

BASH
mkdir src/app/about

Add a page.js file:

JSX
export default function AboutPage() {
  return (
    <h1>About Us</h1>
  );
}

Visit http://localhost:3000/about to see your new page.


Add Styles with Tailwind CSS

If you enabled Tailwind CSS during setup, you can start styling directly in your components:

JSX
export default function HomePage() {
  return (
    <div className="text-center text-blue-500">
      <h1>Welcome to Next.js 15!</h1>
    </div>
  );
}

Deploy on Vercel

Deploying your application is super easy with Vercel, the platform behind Next.js. Here’s how:

  1. Log in to Vercel.
  2. Create a new project and connect your Git repository.
  3. Vercel will automatically detect your Next.js project and configure the deployment.

Once deployed, you’ll get a public URL to share your application.


Conclusion

You now have the basics to get started with Next.js 15. This framework offers a seamless development experience and incredible performance for your web applications. Take the time to explore advanced features like Server Actions, RSC, and streaming rendering.

Ready to build modern and high-performing applications? Get started with Next.js 15 today!

Abonnes-toi à la NewsLetter

Apprends les meilleures pratiques pour devenir un développeur web moderne (JavaScript / React / Next).

Gagner sa vie grâce au code
Devenir développeur Freelance
+35 000 développeurs déjà inscrits.

Accès instantané. Aucune carte de crédit requise.

Rejoins +35 000 développeurs déjà inscrits.