Creating a New Project with Next.js and pnpm

Creating a new project can be a daunting task, especially when you want to ensure efficiency and modern best practices. In this guide, we’ll walk you through setting up a Next.js application using pnpm, exploring the project structure, working with placeholder data, and leveraging TypeScript for better type safety. By the end of this post, you’ll have a solid foundation to start building your Next.js application.

Why Use pnpm?

When starting a new project, we recommend using pnpm as your package manager. It’s faster and more efficient than npm or yarn. If you don’t have pnpm installed, you can install it globally by running the following command in your terminal:

npm install -g pnpm

Setting Up Your Next.js App

To create a Next.js app, open your terminal, navigate to the folder where you’d like to store your project, and run the following command:

npx create-next-app@latest nextjs-dashboard --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example" --use-pnpm

This command uses create-next-app, a CLI tool that sets up a Next.js application for you. The --example flag points to a starter example for this course.

Exploring the Project

Unlike tutorials that have you write code from scratch, much of the code for this course is already written. This reflects real-world development, where you’ll likely work with existing codebases. Our goal is to help you focus on learning the main features of Next.js without writing all the application code.

After installation, open the project in your code editor and navigate to nextjs-dashboard.

cd nextjs-dashboard

Spend some time exploring the project.

Folder Structure

You’ll notice the project has the following folder structure:

/app: Contains all the routes, components, and logic for your application. This is where you’ll mostly be working.
/app/lib: Contains reusable utility functions and data-fetching functions.
/app/ui: Contains all the UI components, such as cards, tables, and forms. These components are pre-styled for you.
/public: Contains all the static assets for your application, such as images.
Config Files: At the root, you’ll find config files like next.config.js, pre-configured by create-next-app.

Feel free to explore these folders. Don’t worry if you don’t understand everything yet.

Placeholder Data

When building user interfaces, it helps to have some placeholder data. If a database or API is not available, you can:

Use placeholder data in JSON format or as JavaScript objects.
Use a 3rd party service like mockAPI.

For this project, we’ve provided placeholder data in app/lib/placeholder-data.ts. Each JavaScript object represents a table in your database. For example, the invoices table:

// app/lib/placeholder-data.ts

const invoices = [
  {
    customer_id: customers[0].id,
    amount: 15795,
    status: 'pending',
    date: '2022-12-06',
  },
  {
    customer_id: customers[1].id,
    amount: 20348,
    status: 'pending',
    date: '2022-11-14',
  },
  // ...
];

In the chapter on setting up your database, you’ll use this data to seed your database.

TypeScript

You may notice most files have a .ts or .tsx suffix. This is because the project is written in TypeScript. We wanted to create a course that reflects the modern web landscape.

If you’re not familiar with TypeScript, don’t worry. We’ll provide the necessary TypeScript code snippets. For now, take a look at the app/lib/definitions.ts file, where we manually define the types that will be returned from the database. For example, the invoices table has the following types:

// app/lib/definitions.ts

export type Invoice = {
  id: string;
  customer_id: string;
  amount: number;
  date: string;
  status: 'pending' | 'paid'; // This is called a string union type.
};

Using TypeScript ensures you don’t accidentally pass the wrong data format to your components or database, like passing a string instead of a number to invoice amount.

If you’re a TypeScript developer:

We manually declare the data types, but for better type-safety, we recommend Prisma or Drizzle, which automatically generates types based on your database schema.
Next.js detects if your project uses TypeScript and automatically installs the necessary packages and configuration. Next.js also comes with a TypeScript plugin for your code editor, helping with auto-completion and type-safety.

Running the Development Server

Run pnpm i to install the project’s packages:

pnpm i

Then, start the development server with:

pnpm dev

The pnpm dev command starts your Next.js development server on port 3000. Let’s check to see if it’s working. Open http://localhost:3000 in your browser. Your home page should look like this, intentionally unstyled:

Unstyled page with the title ‘Acme’, a description, and a login link.

Happy coding! This setup should give you a solid foundation for building

your Next.js application.

Next topics

Read next blog to style your next.js app Styling Next.js Application: Step by step guide

References

A BIT ABOUT ME

I’m Atanu Das, a software developer in Kolkata, India. My expertise spans across the realms of creativity and development. With a background in development, I am consistently exploring the point where education meets instruction, as well as the juncture of technology and artistry. Feel free to connect with me on LinkedIn using the handle @atanu-das-app-developer, and you can also take a glimpse of my creations on Instagram by following @atanu.das.app.developer