Next JS Tutorial for Beginners | ECommerce App - #1 Project Setup & Configuration

Introduction

Welcome to the first episode of our Next.js E-Commerce tutorial series! In this complete course, we're going to build a fully functional, production-ready e-commerce application from scratch.

By the end of this series, you'll have built an app with:

A beautiful, responsive UI
Product browsing and filtering
Shopping cart functionality
User authentication
Order management
And much more!

Let's dive right in and set up our project.

Creating the Next.js Project

First, let's create our Next.js application. Open your terminal and run:

npx create-next-app@latest ecommerce-app

When prompted, select the following options:

Note: You can also use recommend configuration.

✔ Would you like to use TypeScript? Yes
✔ Would you like to use ESLint? Yes
✔ Would you like to use Tailwind CSS? Yes
✔ Would you like your code inside a `src/` directory? No
✔ Would you like to use App Router? Yes
✔ Would you like to use Turbopack for next dev? Yes
✔ Would you like to customize the import alias? Yes (use @/*)

Now let's navigate into our project:

cd ecommerce-app

Understanding the Project Structure

Let's take a look at what Next.js created for us:

ecommerce-app/
├── app/                  # App Router directory
│   ├── favicon.ico
│   ├── globals.css       # Global styles
│   ├── layout.tsx        # Root layout
│   └── page.tsx          # Home page
├── public/               # Static assets
├── .env                  # Environment variables (we'll create this)
├── next.config.ts        # Next.js configuration
├── package.json          # Dependencies
├── tailwind.config.ts    # Tailwind configuration
└── tsconfig.json         # TypeScript configuration

The app directory is where all our pages and components will live. Next.js 16 uses the App Router, which gives us powerful features like server components, layouts, and more.

Initializing shadcn/ui

shadcn/ui is not a component library - it's a collection of beautifully designed, accessible components that you can copy and paste into your project. The best part? You own the code!

Let's initialize shadcn/ui in our project:

npx shadcn@latest init

When prompted, select the following options:

✔ Which style would you like to use? › Default
✔ Which color would you like to use as the base color? › Neutral
✔ Would you like to use CSS variables for theming? › yes

This command will:

Create a components.json configuration file
Set up your lib/utils.ts with the cn utility function
Configure your tailwind.config.ts for shadcn/ui
Update your globals.css with CSS variables

The cn function is a utility that merges Tailwind CSS classes intelligently. This is extremely useful when building reusable components.

Adding Custom Utility Functions

Let's add some additional utility functions to lib/utils.ts:

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

export function formatPrice(price: number): string {
  return new Intl.NumberFormat("en-US", {
    style: "currency",
    currency: "USD",
  }).format(price);
}

export function generateOrderNumber(): string {
  return `ORD-${Date.now()}-${Math.random()
    .toString(36)
    .substring(2, 7)
    .toUpperCase()}`;
}

export function slugify(text: string): string {
  return text
    .toLowerCase()
    .replace(/[^\w ]+/g, "")
    .replace(/ +/g, "-");
}

Setting Up Environment Variables

Create a .env file in the root of your project:

touch .env

Add placeholder variables that we'll configure later:

# Database
DATABASE_URL="your-database-url-here"

# App
NEXT_PUBLIC_APP_URL="http://localhost:3000"

Also create a .env.example file for documentation:

# Database
DATABASE_URL="postgresql://user:password@localhost:5432/ecommerce"

# App
NEXT_PUBLIC_APP_URL="http://localhost:3000"

Updating the Root Layout

Let's update our root layout to set up the basic structure. Open app/layout.tsx:

import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

export const metadata: Metadata = {
  title: "ShopNext - Modern E-Commerce",
  description: "Your one-stop shop for everything you need",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased min-h-screen flex flex-col`}
      >
        {children}
      </body>
    </html>
  );
}

Creating Folder Structure

Let's create the folder structure we'll use throughout this series:

mkdir -p components/ui
mkdir -p components/layout
mkdir -p components/product
mkdir -p server/routers

Your project structure should now look like this:

ecommerce-app/
├── app/
│   ├── globals.css
│   ├── layout.tsx
│   └── page.tsx
├── components/
│   ├── ui/           # Reusable UI components
│   ├── layout/       # Layout components (header, footer)
│   └── product/      # Product-related components
├── lib/
│   └── utils.ts      # Utility functions
├── server/
│   └── routers/      # API routers (for later)
├── public/
├── .env
└── package.json

Running the Development Server

Let's make sure everything is working. Start the development server:

npm run dev

Open your browser and navigate to http://localhost:3000. You should see the default Next.js page.

Summary

In this episode, we:

Created a new Next.js 16 project with TypeScript
Set up our folder structure
Created utility functions

In the next episode, we'll add UI components using shadcn/ui CLI. We'll install buttons, inputs, cards, and more with a single command!

See you in the next one!

Files Created/Modified

app/globals.css - Theme variables and global styles
lib/utils.ts - Utility functions
.env - Environment variables
.env.example - Environment template
app/layout.tsx - Root layout

Next Episode: Installing UI Components with shadcn/ui CLI!