> ## 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.

# Master Modern Web Development with Next.js

> A 2-hour beginner-friendly workshop by Tuturuuu × RMIT SGS Neo Culture Technology Club

<Info>
  📅 **Tuesday, December 16, 2025** | ⏰ **1:45 PM – 4:00 PM**

  **Duration**: \~2 hours of content + time for Q\&A and free exploration | **Level**: Beginner-friendly
</Info>

## 🤝 A Collaboration

This workshop is a collaboration between **[Tuturuuu](https://tuturuuu.com)** and **[RMIT SGS Neo Culture Technology Club](https://rmitnct.club)**.

Next.js is the core technology powering the club's digital infrastructure. This workshop is an essential step for any member who wishes to dive deep into advanced web development and eventually contribute to the club's open-source projects.

## 🏆 Powered by Next.js

Next.js is trusted by industry leaders worldwide:

<CardGroup cols={2}>
  <Card title="Global Brands" icon="building" href="https://nextjs.org/showcase">
    TikTok, Nike, Notion, Anthropic, LG, and many more.
  </Card>

  <Card title="Tuturuuu" icon="rocket" href="https://tuturuuu.com">
    Extensively uses Next.js across all its products and platforms.
  </Card>

  <Card title="rmitnct.club" icon="globe" href="https://rmitnct.club">
    NCT Club's official platform—a fork of [tutur3u/platform](https://github.com/tutur3u/platform).
  </Card>

  <Card title="Neo League 2025" icon="trophy" href="https://nova.ai.vn/competitions/neo-league/prompt-the-future/about">
    NCT Club's **first-ever scale-3 event** on Nova.
  </Card>
</CardGroup>

## 👨‍🏫 Your Instructor

<img src="https://mintcdn.com/tuturuuu/LKHVwofYjE5PdgBy/images/workshops/nextjs/vo-hoang-phuc-with-nct-club.png?fit=max&auto=format&n=LKHVwofYjE5PdgBy&q=85&s=13b3d2a8b435a9ae96d80621deca987b" alt="Vo Hoang Phuc with NCT Club" width="2048" height="1536" data-path="images/workshops/nextjs/vo-hoang-phuc-with-nct-club.png" />

**Vo Hoang Phuc**

* Chairman, Founder & CEO @ [Tuturuuu](https://tuturuuu.com)
* Former Technical Vice President (Generation 6) @ RMIT SGS Neo Culture Technology Club

<Note>
  **A Personal Story**: *"I started my journey the hard way—jumping straight into Next.js, skipping HTML, CSS, and JavaScript entirely! I built my first personal website [vohoangphuc.com](https://vohoangphuc.com), which slowly inspired me to build something for everyone else: [tuturuuu.com](https://tuturuuu.com). By the end of my first year, what started as humble steps turned into a platform. Today, you're learning the foundations I wish I had learned first!"*
</Note>

## 🎯 What You'll Learn

By the end of this 2-hour session, you'll understand:

* **Web fundamentals**: How HTML, CSS, and JavaScript work together
* **Modern styling**: Building beautiful UIs with Tailwind CSS
* **Type safety**: Writing reliable code with TypeScript
* **Component-based development**: Building UIs with React
* **Full-stack framework**: Creating production-ready apps with Next.js
* **AI integration**: Generating structured data with Vercel AI SDK

## ⏱️ Session Timeline

| Actual Time | Topic                                                                    | Offset | Duration |
| ----------- | ------------------------------------------------------------------------ | ------ | -------- |
| 1:45 PM     | Welcome & Setup                                                          | 0:00   | 10 min   |
| 1:55 PM     | [Web Fundamentals](/learn/workshops/nextjs-workshop/01-web-fundamentals) | 0:10   | 15 min   |
| 2:10 PM     | [Tailwind CSS](/learn/workshops/nextjs-workshop/02-tailwind-css)         | 0:25   | 15 min   |
| 2:25 PM     | [TypeScript](/learn/workshops/nextjs-workshop/03-typescript)             | 0:40   | 15 min   |
| 2:40 PM     | ☕ Break                                                                  | 0:55   | 5 min    |
| 2:45 PM     | [React Basics](/learn/workshops/nextjs-workshop/04-react)                | 1:00   | 20 min   |
| 3:05 PM     | [Next.js](/learn/workshops/nextjs-workshop/05-nextjs)                    | 1:20   | 25 min   |
| 3:30 PM     | [AI SDK](/learn/workshops/nextjs-workshop/06-ai-sdk)                     | 1:45   | 10 min   |
| 3:40 PM     | [Next Steps](/learn/workshops/nextjs-workshop/07-next-steps)             | 1:55   | 5 min    |
| 3:45 PM     | 🎯 Q\&A & Free Exploration                                               | 2:00   | 15 min   |

```mermaid theme={null}
graph LR
    A["🌐 Web Basics"] --> B["🎨 Tailwind"]
    B --> C["📝 TypeScript"]
    C --> D["☕ Break"]
    D --> E["⚛️ React"]
    E --> F["▲ Next.js"]
    F --> G["🤖 AI SDK"]
    G --> H["🚀 Next Steps"]

    style A fill:#e34c26,color:#fff
    style B fill:#38bdf8,color:#fff
    style C fill:#3178c6,color:#fff
    style E fill:#61dafb,color:#000
    style F fill:#000,color:#fff
    style G fill:#4f46e5,color:#fff
    style H fill:#22c55e,color:#fff
```

## 🛠️ Prerequisites

**All you need is a laptop!** We'll guide you through everything else.

### Recommended Setup

Before the workshop, please install:

1. **[Bun](https://bun.sh)** - A fast JavaScript runtime and package manager
   ```bash theme={null}
   curl -fsSL https://bun.sh/install | bash
   ```

2. **[Visual Studio Code](https://code.visualstudio.com)** - Our recommended code editor

3. **VS Code Extensions** (optional but helpful):
   * [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)
   * [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
   * [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

## 📚 Resources

Throughout this workshop, we'll reference these resources:

### Beginner Tutorials (W3Schools)

| Technology | Tutorial                                              |
| ---------- | ----------------------------------------------------- |
| HTML       | [w3schools.com/html](https://www.w3schools.com/html/) |
| CSS        | [w3schools.com/css](https://www.w3schools.com/css/)   |
| JavaScript | [w3schools.com/js](https://www.w3schools.com/Js/)     |

### Official Documentation

| Technology    | Documentation                                                                  |
| ------------- | ------------------------------------------------------------------------------ |
| TypeScript    | [TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/intro.html) |
| Next.js       | [nextjs.org/docs](https://nextjs.org/docs)                                     |
| Tailwind CSS  | [tailwindcss.com](https://tailwindcss.com)                                     |
| Vercel AI SDK | [ai-sdk.dev](https://ai-sdk.dev)                                               |
| Bun           | [bun.sh](https://bun.sh)                                                       |

## 🚀 Ready?

Let's begin with [Web Fundamentals →](/learn/workshops/nextjs-workshop/01-web-fundamentals)