Getting started with Next.js

Next.js is a React framework designed for building full-stack web applications.

What is Next.js?

It allows developers to use React components for user interfaces while offering additional features and optimizations. Next.js simplifies complex tasks like bundling and compiling, allowing you to focus on application development instead of configuration.

Whether you’re working solo or as part of a team, Next.js empowers you to build interactive, dynamic, and high-performance React applications.

Main Features of Next.js:

Feature

Descrtiption

Routing

A file-system-based router with support for layouts, nested routing, error handling, and more.

Rendering

Client-side and server-side rendering, optimized with static and dynamic rendering, and streaming.

Data Fetching

Simplified data fetching with async/await in server components, enhanced with caching and revalidation.

Styling

Support for various styling methods, including CSS Modules, Tailwind CSS, and CSS-in-JS.

Optimizations

Image, font, and script optimizations to enhance Core Web Vitals and user experience.

TypeScript

Enhanced TypeScript support with improved type checking, efficient compilation, and custom plugins.

How to Use These Docs

The documentation is organized to guide you from basic to advanced topics sequentially, but you can also jump to specific sections as needed. Use the search bar or table of contents to navigate quickly.

Getting Started: Begin with the Installation guide.

App Router vs Pages Router: Next.js has two routers—the App Router for modern features like Server Components, and the Pages Router, which supports older projects.

Pre-Requisite Knowledge: A basic understanding of HTML, CSS, and React is recommended.

Join the Community: Engage with the Next.js community on GitHub, Discord, Twitter, and Reddit.

Installation

System Requirements

• Node.js 18.18 or later.

• Supported on macOS, Windows (including WSL), and Linux.

Automatic Installation

Start by creating a new Next.js app using create-next-app:

npx create-next-app@latest

During the setup, you’ll be prompted to choose options like TypeScript, ESLint, Tailwind CSS, and others. For example:

What is your project named? my-app
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 your code inside a `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to use Turbopack for `next dev`? No / Yes
Would you like to customize the import alias (`@/*` by default)? No / Yes

After the prompts, create-next-app will generate a project folder with your selected configuration and install the necessary dependencies.

Manual Installation

To manually create a Next.js app:

1. Install the necessary packages:

npm install next@latest react@latest react-dom@latest

Add the following to your package.json:

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

These scripts correspond to different stages of application development.

Creating Directories

The App Directory:

For new applications, it’s recommended to use the App Router, which supports the latest React features. Create an app/ directory with layout.tsx and page.tsx files.

// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

// app/page.tsx
export default function Page() {
  return <h1>Hello, Next.js!</h1>;
}

The Pages Directory (Optional):

If you prefer the Pages Router, create a pages/ directory at the root of your project.

// pages/index.tsx
export default function Page() {
  return <h1>Hello, Next.js!</h1>;
}

// pages/_app.tsx
import type { AppProps } from 'next/app';

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

// pages/_document.tsx
import { Html, Head, Main, NextScript } from 'next/document';

export default function Document() {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

The Public Folder (Optional)

Create a public/ folder for static assets like images and fonts. These can be referenced from the base URL.

Running the Development Server

Start the development server with:

npm run dev

Visit http://localhost:3000 to view your application. Modify app/page.tsx (or pages/index.tsx) and save to see changes live.

This guide should serve as a comprehensive starting point for building applications with Next.js. Continue exploring more advanced topics as needed.

PreviousShadCN NextDeveloping on Solana

Last updated 8 months ago

What is your project named? my-app 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 your code inside a `src/` directory? No / Yes Would you like to use App Router? (recommended) No / Yes Would you like to use Turbopack for `next dev`? No / Yes Would you like to customize the import alias (`@/*` by default)? No / Yes

// app/layout.tsx export default function RootLayout({ children }: { children: React.ReactNode }) { return ( <html lang="en"> <body>{children}</body> </html> ); } // app/page.tsx export default function Page() { return <h1>Hello, Next.js!</h1>; }

// pages/index.tsx export default function Page() { return <h1>Hello, Next.js!</h1>; } // pages/_app.tsx import type { AppProps } from 'next/app'; export default function App({ Component, pageProps }: AppProps) { return <Component {...pageProps} />; } // pages/_document.tsx import { Html, Head, Main, NextScript } from 'next/document'; export default function Document() { return ( <Html> <Head /> <body> <Main /> <NextScript /> </body> </Html> ); }