# Next

> React framework for building web applications with SSR, SSG, ISR, and App Router. Includes...

- Skill: `newkub/next` (Agent Skill, multi-file: 14 files)
- Install (CLI): `npx skillmds@latest add newkub/next`
- Raw SKILL.md: https://api.skillmd.com/api/skills/newkub/next/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: newkub (https://skillmd.com/u/newkub)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/newkub/next

---

## Goal

สร้าง React applications ด้วย SSR/SSG/ISR และ App Router


## Scope

ใช้สำหรับการพัฒนา React applications ที่ต้องการ SEO-friendly, performance สูง และ optimized loading


## Execute

### 1. Create Project

สร้าง project ด้วย `bun create next-app`

### 2. Architecture

อ่าน `guide/architecture.md` สำหรับ architecture ของ Next.js

### 3. Best Practices

อ่าน `guide/best-practices.md` สำหรับ best practices

### 4. Configuration

อ่าน `guide/configuration.md` สำหรับการตั้งค่า

### 5. Features

อ่าน `guide/features.md` สำหรับ features ที่มี

### 6. How It Works

อ่าน `guide/how-it-works.md` สำหรับวิธีการทำงาน

### 7. Installation

อ่าน `guide/installation.md` สำหรับการติดตั้ง

### 8. Integration

อ่าน `guide/integration.md` สำหรับ integration

### 9. Key Concept

อ่าน `guide/key-concept.md` สำหรับแนวคิดหลัก

### 10. Quick Start

อ่าน `guide/quick-start.md` สำหรับเริ่มต้นใช้งาน

### 11. CLI Documentation

อ่าน `references/cli.md` สำหรับ CLI documentation

### 12. Configuration Reference

อ่าน `references/configuration.md` สำหรับ configuration reference

### 13. Sitemap

อ่าน `references/sitemap.md` สำหรับ sitemap ของ documentation

### 14. Website

อ่าน `references/website.md` สำหรับเว็บไซต์และ resources

### 15. Create Next.js App

อ่าน `workflows/create-nextjs-app.md` สำหรับ workflow สร้าง Next.js app


## Rules

- ใช้ TypeScript สำหรับ type safety
- ใช้ server components สำหรับ data fetching
- ใช้ client components สำหรับ interactivity
- ใช้ proper caching strategies
- Optimize images และ fonts
- Implement proper error handling
- ใช้ App Router และ file-based routing
- ใช้ backticks สำหรับ commands
- ใช้ code blocks สำหรับ examples
- ใช้ ansi markdown diagrams สำหรับ flow และ architecture


## Expected Outcome

- SEO-friendly web applications
- Performance สูงด้วย SSR/SSG/ISR
- Modern React features ด้วย App Router
- Optimized loading ด้วย image และ font optimization