Salin dan Bagikan

Cara Setup Next.js Project dari Awal

Next.js adalah React framework populer untuk building full-stack web applications. Berikut panduan setup dari awal.

Prerequisites

Requirements

Needed:
- Node.js 18.17+
- npm/yarn/pnpm
- Code editor (VS Code)
- Terminal

Creating New Project

Using create-next-app

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

# With specific options
npx create-next-app@latest my-app --typescript --tailwind --eslint --app

Setup Prompts

Options yang ditanyakan:
✔ Would you like to use TypeScript? Yes
✔ Would you like to use ESLint? Yes
✔ Would you like to use Tailwind CSS? Yes
✔ Would you like to use `src/` directory? Yes
✔ Would you like to use App Router? Yes
✔ Would you like to customize the default import alias? No

Project Structure

App Router Structure

my-app/
├── src/
│   ├── app/
│   │   ├── layout.tsx
│   │   ├── page.tsx
│   │   ├── globals.css
│   │   └── api/
│   └── components/
├── public/
├── next.config.js
├── package.json
├── tailwind.config.js
└── tsconfig.json

Running Development Server

Start Dev Server

# Navigate to project
cd my-app

# Run development server
npm run dev

# Open http://localhost:3000

Creating Pages

Basic Page

// src/app/about/page.tsx
export default function AboutPage() {
  return (
    <main>
      <h1>About Us</h1>
      <p>Welcome to our website</p>
    </main>
  );
}

Dynamic Routes

// src/app/blog/[slug]/page.tsx
export default function BlogPost({ params }: { params: { slug: string } }) {
  return <h1>Post: {params.slug}</h1>;
}

Layout System

Root Layout

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

API Routes

Creating API Endpoint

// src/app/api/hello/route.ts
import { NextResponse } from "next/server";

export async function GET() {
  return NextResponse.json({ message: "Hello World" });
}

Building for Production

Build Command

# Build production version
npm run build

# Start production server
npm start

Kesimpulan

Next.js menyediakan developer experience yang excellent dengan fitur seperti file-based routing, API routes, dan optimizations built-in.