> ## Documentation Index > Fetch the complete documentation index at: https://docs.tuturuuu.com/llms.txt > Use this file to discover all available pages before exploring further. # Part 5: Next.js > The React framework for production - build full-stack web applications ⏱️ **Duration**: 25 minutes | This is the core technology powering rmitnct.club! ## What is Next.js? Next.js is a **React framework** that gives you everything you need for production. **If React is a sword, Next.js is the entire armory! ⚔️🛡️** | What you get | Benefit | | ----------------------------- | ----------------------------- | | 🗂️ **File-based routing** | Create a file = create a page | | ⚡ **Server-side rendering** | SEO-friendly, fast loads | | 🔄 **API routes** | Backend in the same project | | 📦 **Built-in optimizations** | Images, fonts, scripts | **Fun Fact**: Next.js was created by **Vercel** and is used by TikTok, Nike, Notion, Anthropic, LG, and Tuturuuu. It powers both [rmitnct.club](https://rmitnct.club) and [Neo League 2025](https://nova.ai.vn/competitions/neo-league/prompt-the-future/about)! *** ## Creating a Next.js Project The fastest way to create a Next.js app: ```bash theme={null} # Option 1: Using npx (Node.js) npx create-next-app@latest my-app # Option 2: Using bunx (Bun - faster!) bunx create-next-app@latest my-app # Navigate into the project cd my-app # Start the development server bun dev # or: npm run dev ``` When prompted, select these options for this workshop: * ✅ TypeScript * ✅ Tailwind CSS * ✅ App Router * ❌ src/ directory (optional) Open [http://localhost:3000](http://localhost:3000) to see your app! Browse 100+ ready-to-use templates for blogs, e-commerce, dashboards, and more! *** ## Project Structure ``` my-app/ ├── app/ # 👈 Your pages and layouts │ ├── layout.tsx # Root layout (shared UI) │ ├── page.tsx # Home page (/) │ └── globals.css # Global styles ├── public/ # Static files (images, etc.) ├── package.json # Dependencies └── tailwind.config.ts # Tailwind configuration ``` *** ## File-Based Routing In Next.js, **files become pages**. Create a file, get a route! | File Path | URL | | -------------------------- | ------------------- | | `app/page.tsx` | `/` | | `app/about/page.tsx` | `/about` | | `app/blog/page.tsx` | `/blog` | | `app/blog/[slug]/page.tsx` | `/blog/hello-world` | How page.tsx creates routes ### Creating Your First Page Create `app/about/page.tsx`: ```tsx theme={null} export default function AboutPage() { return (

About Us

Welcome to our Next.js app!

); } ``` Now visit [http://localhost:3000/about](http://localhost:3000/about)! *** ## Layouts Layouts wrap pages with shared UI (navbars, footers, etc.). ### Root Layout (`app/layout.tsx`) ```tsx theme={null} import './globals.css'; export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( {/* Navigation bar */} {/* Page content */}
{children}
{/* Footer */} ); } ``` How layouts wrap pages *** ## Server vs Client Components Next.js has two types of components: | Server Components | Client Components | | ----------------------------- | ------------------------------- | | Run on the server | Run in the browser | | Can access databases directly | Can use `useState`, `useEffect` | | Default in Next.js | Add `'use client'` at top | | Great for static content | Great for interactivity | ### Server Component (Default) ```tsx theme={null} // app/users/page.tsx // This runs on the server! async function getUsers() { const res = await fetch('https://api.example.com/users'); return res.json(); } export default async function UsersPage() { const users = await getUsers(); return (

Users

); } ``` ### Client Component ```tsx theme={null} 'use client'; // 👈 This makes it a client component import { useState } from 'react'; export default function Counter() { const [count, setCount] = useState(0); return ( ); } ``` **Rule of Thumb**: Keep components as Server Components unless they need interactivity (`onClick`, `useState`, etc.). *** ## Navigation with Links Use the `Link` component for navigation: ```tsx theme={null} import Link from 'next/link'; export default function Navbar() { return ( ); } ``` **Why Link?** It enables client-side navigation without full page reloads - much faster! *** ## Dynamic Routes Create pages with dynamic parameters: ### File: `app/blog/[slug]/page.tsx` ```tsx theme={null} interface BlogPostProps { params: Promise<{ slug: string }>; } export default async function BlogPost({ params }: BlogPostProps) { const { slug } = await params; return (

Blog Post: {slug}

Content for {slug}...

); } ``` Now `/blog/hello-world` will show "Blog Post: hello-world"! *** ## API Routes Build your API in the same project: ### File: `app/api/hello/route.ts` ```typescript theme={null} import { NextResponse } from 'next/server'; export async function GET() { return NextResponse.json({ message: 'Hello from the API!', timestamp: new Date().toISOString(), }); } export async function POST(request: Request) { const body = await request.json(); return NextResponse.json({ received: body, status: 'success', }); } ``` Now visit [http://localhost:3000/api/hello](http://localhost:3000/api/hello)! *** ## Building for Production ```bash theme={null} # Build the app bun run build # Start production server bun start ``` Or deploy to **Vercel** with zero configuration: ```bash theme={null} # Install Vercel CLI bun add -g vercel # Deploy vercel ``` *** ## Complete Example: Blog ```tsx theme={null} // app/page.tsx import Link from 'next/link'; const posts = [ { slug: 'getting-started', title: 'Getting Started with Next.js' }, { slug: 'react-basics', title: 'React Basics for Beginners' }, { slug: 'tailwind-tips', title: 'Tailwind CSS Tips and Tricks' }, ]; export default function HomePage() { return (

My Blog

{posts.map((post) => (

{post.title}

Read more →

))}
); } ``` *** ## Next.js Cheat Sheet | Feature | Syntax | | ---------------- | --------------------------------------------------- | | Create page | `app/[path]/page.tsx` | | Create layout | `app/[path]/layout.tsx` | | Client component | `'use client'` at top of file | | Navigation | `` | | Dynamic route | `app/blog/[slug]/page.tsx` | | API route | `app/api/[path]/route.ts` | | Use params | `{ params }: { params: Promise<{ slug: string }> }` | *** ## Learn More Complete documentation Free interactive course *** **Next up**: [Vercel AI SDK →](/learn/workshops/nextjs-workshop/06-ai-sdk)