In this chapter, we'll create a fresh Next.js project and explore what the framework gives us out of the box. By the end, you'll have a running Next.js application ready for building our AI chat app.
Need Help?
If you encounter any difficulties, you can always reference the complete code from this GitHub repository:
Before we begin, make sure you have a JavaScript package manager installed on your system. You can choose any of the following:
To verify your installation, run one of these commands in your terminal:
bash
If the command returns a version number, you're good to go! If not, click on the links above to install your preferred package manager.
Let's create our Next.js application. Open your terminal and run:
bash
Let's break down what each command does:
bun create next-app@latest nextjs-chat --yes
create next-app@latest - Uses the latest Next.js templatenextjs-chat - Names our project directory--yes - Automatically accepts all default optionscd nextjs-chat
bun dev
http://localhost:3000About Bun: In this course, we're using Bun as our package manager because it's fast and modern. However, you're not limited to Bun - feel free to use npm, yarn, or pnpm instead. Just replace
bunwith your preferred package manager in all commands throughout this course.
Note: The
--yesflag accepts the following defaults:
- TypeScript: Yes
- ESLint: Yes
- Tailwind CSS: Yes
src/directory: No- App Router: Yes
- Import alias:
@/*
After running the create command, you'll see a new nextjs-chat directory with the following structure:
text
Let's explore the key files and directories:
app/ DirectoryThis is the heart of your Next.js application using the App Router (introduced in Next.js 13+).
layout.tsx - The root layout that wraps all pages. This is where you define shared UI elements like headers, footers, or providers that persist across navigation.
page.tsx - The home page of your application (maps to / route). Each page.tsx file in the app directory creates a new route.
globals.css - Global styles applied across your entire application. By default, it includes Tailwind CSS directives.
public/ DirectoryStatic assets that are served directly. Files in this directory can be referenced from the root URL. For example, public/logo.png would be accessible at /logo.png.
next.config.ts - Next.js configuration file. This is where you customize webpack, add environment variables, configure domains for images, and more.
package.json - Lists your project dependencies and scripts. You'll see:
json
tsconfig.json - TypeScript configuration. Next.js comes with sensible defaults pre-configured.
eslint.config.mjs - ESLint configuration for code quality and consistency.
node_modules/Contains all installed dependencies. This directory is generated automatically and should never be edited manually.
If the dev server started successfully, open your browser and navigate to:
text
You should see the default Next.js welcome page.
To make development faster and create a better user experience, we'll use shadcn/ui - a collection of accessible and customizable components. Unlike traditional libraries, shadcn/ui copies component code directly into your project, giving you full control to modify them as needed.
In your terminal, run:
bash
You'll be prompted with configuration questions. Accept the defaults or choose your preferences for style and colors. The CLI will automatically detect your project setup and configure everything for you.
After initialization, you'll have two new files: components.json (shadcn configuration) and lib/utils.ts (UI utilities we'll use later).
Next.js 16+ introduced an cacheComponents feature that improves performance by caching component rendering results.
Open next.config.ts and update it to enable this feature:
typescript
This configuration will allow us to use cached components throughout our application.
Now that you have a running Next.js application, you're ready to start building! In the next chapter, we'll:
use cache directive while writing database and action codeKeep your dev server running (bun dev) as we'll be making changes and seeing them update in real-time.
Troubleshooting:
bun devMark this chapter as finished to continue
Mark this chapter as finished to continue