Next.js REST API Project

A modern REST API built with Next.js 16, TypeScript, and Tailwind CSS. This project provides a solid foundation for building scalable APIs with the latest web technologies.

Warning

Critical Security Vulnerability: CVE-2025-55182 & CVE-2025-66478

A critical Remote Code Execution (RCE) vulnerability affecting React Server Components (RSC) was found in:

• React 19.0.0 – 19.2.0
• Next.js ≤ 16.0.6

These vulnerabilities allow unauthenticated attackers to execute arbitrary code on the server.

This project has been patched with secure versions:

• Next.js 16.0.7
• React 19.2.1
• React DOM 19.2.1

If you clone, fork, or contribute to this repository, ensure you are using the patched versions to remain secure.

---

Educational Web Scraping & API Learning (LEGAL & ETHICAL)

⚠️ DISCLAIMER

All code examples in this repository are provided FOR EDUCATIONAL PURPOSES ONLY.

✅ Allowed:

• Scraping publicly accessible data
• Consuming official/public APIs
• Learning how web technologies work

❌ NOT allowed:

• Exploiting systems or vulnerabilities
• Bypassing authentication or authorization
• Scraping private or sensitive data
• Violating Terms of Service or applicable laws

---

🎯 Learning Objectives

This repository is intended to help you:

• Understand HTTP requests & responses
• Learn ethical web scraping
• Consume REST APIs
• Analyze HTML structures
• Practice defensive API security on your own projects

---

📖 Description

This project serves as a comprehensive foundation for building REST APIs using Next.js 16 and TypeScript. It features:

• Next.js 16 with App Router for flexible API development
• Full TypeScript support for type-safe code
• Tailwind CSS for utility-first styling
• Pre-configured ESLint and Prettier for code quality
• Ready-to-use API route examples
• Modern JavaScript features (ES2017+)
• React 19 integration

Perfect for developers looking to build scalable APIs with the latest web technologies.

🖼️ Project Overview

Landing Page Dark Mode

Landing Page Light Mode

🚀 Features

• Next.js 16 - Latest version with enhanced performance
• TypeScript - Type-safe development
• Tailwind CSS - Utility-first styling
• REST API - Clean and scalable API endpoints
• ESLint & Prettier - Code quality and formatting
• Modern JavaScript - ES2017+ support
• React 19 - Latest React features

🛠️ Tech Stack

• Framework: Next.js 16.0.7
• Language: TypeScript 5+
• Styling: Tailwind CSS 4+
• Icons: Lucide React
• Animation: Framer Motion
• UI Components: Radix UI primitives

🚀 Quick Start

1. Clone the repository

   git clone https://github.com/seaavey/restapi.git
   cd restapi

2. Install dependencies

   bun install
   # or
   npm install

3. Run the development server

   bun dev
   # or
   npm run dev

4. Open your browser Visit http://localhost:3000 to see the result.

🛠️ Available Scripts

• bun dev - Start the development server
• bun build - Build the application for production
• bun start - Start the production server
• bun lint - Run ESLint to check for code issues

🧪 API Development

For API routes, you can use either approach depending on your needs:

App Router (Recommended - app directory)

API routes in the app directory provide more flexibility and are the current recommended approach:

// Example: app/api/users/route.ts
import { NextRequest } from 'next/server';

export async function GET(request: NextRequest) {
    // Handle GET request
    return new Response(JSON.stringify({ message: 'Hello World' }), {
        status: 200,
        headers: {
            'Content-Type': 'application/json',
        },
    });
}

export async function POST(request: NextRequest) {
    // Handle POST request
    const body = await request.json();
    return new Response(JSON.stringify({ message: 'Data received', data: body }), {
        status: 201,
        headers: {
            'Content-Type': 'application/json',
        },
    });
}

Pages Router (Legacy - pages/api directory)

The traditional approach using the pages/api directory:

// Example: pages/api/users.ts
import type { NextApiRequest, NextApiResponse } from 'next';

export default function handler(req: NextApiRequest, res: NextApiResponse) {
    if (req.method === 'GET') {
        res.status(200).json({ message: 'Hello World' });
    } else if (req.method === 'POST') {
        const { name } = req.body;
        res.status(201).json({ message: `Hello ${name}` });
    } else {
        res.status(405).json({ error: 'Method not allowed' });
    }
}

The App Router approach (app/api) is recommended for new projects as it provides:

• Better route organization with nested routing
• More flexible request/response handling
• Support for React Server Components
• Better performance with streaming capabilities

🌐 Repository

Check out the project repository for the latest updates and to contribute: https://github.com/seaavey/restapi

🎨 Styling

This project uses Tailwind CSS for styling. You can customize the styles in app/globals.css and use Tailwind classes throughout your components.

🔄 Environment Variables

For environment variables, create a .env.local file in the root directory:

DATABASE_URL=your_database_url
API_KEY=your_api_key

🚀 Deployment

Vercel (Recommended)

Deploy your Next.js app to Vercel with one click:

Other Platforms

• Netlify
• AWS
• Google Cloud
• Railway
• Render

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

👨‍💻 Author

Muhammad Adriansyah

• Website: https://seaavey.my.id
• Project: restapi

✨ Acknowledgments

• Thanks to the Next.js team for creating an amazing framework
• The TypeScript team for type safety
• Tailwind CSS team for the utility-first approach
• All the contributors to the open-source libraries used in this project