Setting up a Next.js Project

Learn how to create a new Next.js project and understand its structure.

Creating a New Next.js Project

Use the create-next-app command to scaffold a new Next.js project with all the necessary configurations.

Create Next.js App Command

npx create-next-app@latest my-workshop
# Or with Yarn
yarn create next-app my-workshop
# Or with pnpm
pnpm create next-app my-workshop

Next.js Project Structure

A typical Next.js project has the following file structure. The app directory is where your application code lives.

File Structure

my-workshop/
├── app/
│   ├── favicon.ico
│   ├── globals.css
│   ├── layout.tsx
│   └── page.tsx
├── components/
├── public/
├── .eslintrc.json
├── .gitignore
├── next.config.js
├── package.json
├── postcss.config.js
├── README.md
├── tailwind.config.js
└── tsconfig.json

Running the Development Server

Start the development server to see your application in action.

Development Server Command

npm run dev
# Or with Yarn
yarn dev
# Or with pnpm
pnpm dev

Hello World Example

Let's create a simple "Hello, World!" example in the app/page.tsx file.

app/page.tsx

Hello, World!

Welcome to my Next.js application

What You've Learned

  • How to create a new Next.js project using create-next-app
  • Understanding the basic file structure of a Next.js project
  • How to run the development server
  • Creating a simple "Hello, World!" page

Alternative JavaScript Frameworks

While this workshop focuses on Next.js, there are several other popular JavaScript frameworks you might want to explore:

  • Tanstack: A collection of high-quality open source tools for building robust, scalable web applications.
  • Vue.js: A progressive framework for building user interfaces, known for its simplicity and flexibility.
  • Astro: A static site builder that allows you to use multiple frameworks together and ship less JavaScript.
  • Nuxt: A intuitive framework for building Vue.js applications with server-side rendering capabilities.
  • Svelte: A radical new approach to building user interfaces, compiling your code to tiny, framework-less vanilla JS.

Each of these frameworks has its own strengths and use cases. Exploring them can broaden your understanding of modern web development approaches.