Skip to main content
Advertisement

Next.js: Environment Setup and Basics (Step 1)

Target Version: Next.js 14 / 15+ (App Router) Official Documentation: Next.js Documentation

1. Introduction to Next.js​

Next.js is a React-based full-stack framework created by Vercel. It provides a file-system-based routing system and powerful rendering strategies (SSR, SSG, ISR).

  • App Router: The core of the latest Next.js versions, providing a new routing system.
  • Server Components: High-performance components that are pre-rendered on the server before being sent to the client.

2. Starting a Project (npx)​

The most recommended way to start a project is by using create-next-app.

npx create-next-app@latest my-next-site
  • TypeScript: Yes (for stability)
  • ESLint: Yes
  • Tailwind CSS: Yes (for maximum styling productivity)
  • App Router: Yes (the modern standard)

3. Understanding the Folder Structure​

  • app/: The core folder where all routes (pages) and layouts are located.
  • public/: Where static images and assets are stored.
  • next.config.js: The configuration file for the framework.

4. Creating Your First Page (page.tsx)​

The app/page.tsx file handles the root path (/).

export default function Home() {
  return (
    <main>
      <h1>Welcome to the world of Next.js!</h1>
      <p>Build high-performance apps using the App Router.</p>
    </main>
  );
}
Advertisement
Advertisement