Skip to main content

Next.js

Features​

  • Hybrid rendering = Server-side rendering + Static site generation
  • Automatic Code Splitting
  • Built-in CSS and SASS support + TypeScript support
  • Image Optimization
  • Edge & Middleware support
  • Hot reloading
  • SEO Friendly
  • Incremental Static Regeneration
  • Easy deployment with Vercel
  • API Routes with folder's structure
    • [dynamic id]
    • [...multiple match]
    • (collocation)
    • _private

Use cases​

  • E-commerce websites
  • Blogs and content-driven sites
  • Dashboard and admin panels
  • Marketing and landing pages
  • Applications requiring dynamic and static content mix

Install & Setup​

# Create a new Next.js app
npx create-next-app@latest my-next-app
cd my-next-app

# Start the development server
npm run dev

Project Structures​

Project structure
Details

app/

App directory for server and client components, routes and layouts.

Contains

  • layout.tsx — Top-level layout and shared UI.
  • page.tsx — Default route rendered at `/`.

Fundamental​

Routing​

Project structure
Details

app/

Next.js App Router structure with routes, layouts, and nested folders.

Contains

  • _secret/ — Hidden route folder excluded from routing.
  • (auth)/ — Optional auth route group that does not change the URL.
  • [...slugs]/ — Catch-all route folder for arbitrary nested paths.
  • components/ — Reusable UI components that are not route files.
  • dashboard/ — Dashboard route with parallel UI segments.
  • hello/ — Nested hello route examples.
  • intercepting/ — Intercepting route folder for navigation flows.
  • layout.tsx — Shared layout for the app router.
  • not-found.tsx — Custom not-found page.
  • page.tsx — Root page for the app.
app/hello/[username]/page.tsx
import { useRouter } from "next/router";

export default function HelloUser() {
  const router = useRouter();
  const { username } = router.query;
  return <p>Hello {username}!</p>;
}
app/dashboard/page.tsx
export function Dashboard({
  children: React.Node,
  notifications: React.Node,
  users: React.Node
}) {
  return (
    <div>
      {children}
      {notifications}
      {users}
    </div>
  );
}

Server Component​

app/components/ServerComponent.tsx
async function ServerComponent() {
  const data = await fetch("https://api.example.com/data");
  const result = await data.json();

  return (
    <div>
      {result.map((item) => (
        <p key={item.id}>{item.name}</p>
      ))}
    </div>
  );
}

// Using like normal components
<ServerComponent />;

Metadata​

  • Good for SEO
  • Use with file [layout|page].[js|jsx|ts|tsx]
app/layout.tsx
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "...",
  description: "...",
};

export default function Page() {}

Notes​

  • Fetch options
    • Data on server-components has catching, put { cache: 'no-store' }
    • To revidate on n seconds, put { next: { revalidate: time } }
  • Component

    • All components of Next is server-components

    • To make client-components, put 'use-client' on top of file

      "use-client";

      export function ClientComponent() {}

    • Hooks can only use in client-components

    • Package catching type of component: client-only & server-only

    • When to use

      • Client: actions | themes | user's behaviors
      • Server: fetching, work with file + data

References​