Project Setup

Build your first Next.js project from scratch using create-next-app and configure it for NewsWave development.

Setting up a Next.js project feels different from creating a React app. Unlike create-react-app, Next.js includes everything you need for production right out of the box. The official way to start a Next.js project is create-next-app. This CLI tool sets up your project with the latest features, proper TypeScript support, and sensible defaults that teams at companies like Vercel and GitHub use daily.

Creating Your First Next.js Project

The create-next-app command generates a complete project structure. Think of it as scaffolding that gives you pages, routing, and build tools without any configuration.

# Create the NewsWave project
npx create-next-app@latest newswave

# Navigate into the project
cd newswave

# Start the development server
npm run dev

Terminal
$ npx create-next-app@latest newswave
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? … No / Yes
✔ Would you like to customize the default import alias? … No / Yes
✓ Creating a new Next.js app in /newswave
✓ Installing dependencies...
✓ Project created successfully!

What just happened?

The CLI created a complete Next.js project with routing, development server, and build tools configured. App Router gives you the new file-based routing system. TypeScript adds type safety for catching bugs early. Try this: Open the project in VS Code and explore the generated files.

Understanding the Setup Options

Each option during setup configures your project differently. The choices affect how you write code and deploy to production.

TypeScript

Adds type checking to catch errors before they reach users. Recommended for teams and larger projects.

App Router

The new routing system with layouts, loading states, and React Server Components. Choose this for new projects.

Tailwind CSS

Utility-first CSS framework that speeds up styling. Popular at companies like GitHub and Shopify.

src/ Directory

Moves your app code into a src folder, keeping the root clean. Good for larger projects with many config files.

For NewsWave, choose TypeScript (Yes), ESLint (Yes), Tailwind CSS (Yes), src/ directory (No), App Router (Yes), and default import alias (No). This gives you modern tooling without complexity.

Running Your Development Server

Next.js includes a development server with hot reloading. Unlike plain React, changes appear instantly without losing component state.

# Start development server on localhost:3000
npm run dev

# Alternative commands for different package managers
yarn dev
pnpm dev

What just happened?

Next.js started a development server with fast refresh enabled. Changes to your code trigger instant updates in the browser. The welcome page shows you're ready to start building. Try this: Edit the page.js file and watch changes appear immediately.

Project Structure Overview

Your new Next.js project contains several important files and folders. Each serves a specific purpose in the development and build process.

📁 newswave/
📁 app/
📄 layout.js # Root layout component
📄 page.js # Home page component
📄 globals.css # Global styles
📁 public/
📄 next.svg # Static assets
📄 vercel.svg
📄 package.json # Dependencies and scripts
📄 next.config.js # Next.js configuration
📄 tailwind.config.js # Tailwind CSS config

The app folder contains your application code. Unlike React Router, Next.js uses the file system for routing. Every page.js file becomes a route automatically.

Essential NPM Scripts

Next.js projects come with scripts for development, building, and deployment. Understanding these commands helps you work efficiently across different environments.

Important Scripts

npm run dev starts development server with hot reloading. npm run build creates production bundle with optimizations. npm run start serves the built application. npm run lint checks code quality with ESLint rules.

{
  "scripts": {
    "dev": "next dev",           // Development server
    "build": "next build",       // Production build
    "start": "next start",       // Serve built app
    "lint": "next lint"          // Code quality check
  }
}

The build process optimizes your code for production. Next.js automatically splits JavaScript bundles, optimizes images, and generates static pages where possible. This happens without any configuration.

Environment Setup and Configuration

Next.js works best with Node.js 18 or later. The framework uses modern JavaScript features and optimizations that require a recent Node version.

Terminal
$ node --version
v18.17.0
$ npm --version
9.6.7
✓ Environment ready for Next.js development

Your editor setup matters too. VS Code with the ES7+ React/Redux/React-Native snippets extension speeds up development significantly. The TypeScript and Tailwind CSS extensions add IntelliSense support.

Customizing Your NewsWave Project

The default Next.js template gives you a starting point. But NewsWave needs custom styling and structure for a news website.

// app/page.js - Custom NewsWave homepage
export default function Home() {
  return (
    <main className="min-h-screen bg-gray-50">
      <div className="container mx-auto px-4 py-8">
        <h1 className="text-4xl font-bold text-gray-900 mb-8">
          Welcome to NewsWave
        </h1>
        <p className="text-lg text-gray-600 mb-6">
          Your source for breaking news and in-depth articles
        </p>
        <div className="grid md:grid-cols-3 gap-6">
          {/* Article cards will go here */}
        </div>
      </div>
    </main>
  )
}

What just happened?

You replaced the default Next.js homepage with a custom NewsWave design. Tailwind classes handle the responsive layout and styling. The component exports as default, making it the page component. Try this: Add more article cards or change the color scheme using different Tailwind classes.

Development Workflow Best Practices

Efficient Next.js development follows patterns that prevent common mistakes. Hot reloading works best when you structure components properly and avoid certain patterns.

Hot Reloading Tips

Fast Refresh preserves component state between changes. Export components as default functions for best results. Avoid anonymous functions in exports. Always restart the dev server after changing next.config.js or environment variables.

Keep your development server running while you code. Next.js compiles pages on-demand, so new routes appear automatically when you create page files. Error messages show in both terminal and browser for easy debugging. The NewsWave project structure will grow as you add features. Start with clean, simple components that focus on single responsibilities. This makes testing and maintenance easier as your news site expands.

Quiz

Up Next: Folder Structure

Explore how Next.js organizes files and folders to create routes, layouts, and components automatically.

← Previous Course Index Next →