Next.js API Routes

Relevant source files

The following files were used as context for generating this wiki page:

• app/api/proxy/route.ts
• components/tools/curl-converter.tsx
• components/tools/ssl-toothbrush.tsx
• components/tools/websocket-fish-scaler.tsx
• components/tool-content.tsx
• package.json

Next.js API Routes in the DevUtils project serve as the backend bridge for client-side tools that require server-side capabilities, such as bypassing Cross-Origin Resource Sharing (CORS) restrictions or performing network-level checks. These routes are implemented using the Next.js App Router convention, located within the app/api/ directory.

The primary role of these routes is to handle specialized requests from components like the cURL Converter and SSL Certificate Toothbrush, ensuring that sensitive network operations or external API calls are executed in a controlled server environment.

Architecture and Implementation

The project utilizes Next.js version 16.1.4 and leverages standard NextRequest and Response objects for handling incoming traffic and returning data. The API implementation is designed to be lightweight, often acting as a proxy or a specialized parser for external resources.

Request Handling Flow

When a client-side tool needs to perform a network operation, it dispatches a request to a specific API route. The route validates the input, sanitizes headers to prevent vulnerabilities like CRLF injection, and executes the required logic using server-side fetching or third-party libraries.

The diagram above illustrates the typical data flow from a UI component through the API route to an external resource.
Sources: app/api/proxy/route.ts:25-78, components/tools/curl-converter.tsx:236-258

Core API Endpoints

HTTP Proxy Route (/api/proxy)

The proxy route is specifically designed to facilitate requests from the CurlConverter tool. It allows the frontend to execute arbitrary HTTP methods against external URLs that might otherwise be blocked by browser CORS policies.

Key Logic:

• URL Normalization: Uses the normalize-url package to ensure the target URL is correctly formatted.
• Header Sanitization: Implements a sanitizeHeaders function to prevent CRLF injection by stripping headers containing carriage return or newline characters.
• Timeout Management: Uses an AbortController with a 30-second timeout to prevent hanging requests.
• Response Processing: Automatically detects application/json content types to return structured data; otherwise, it returns raw text.

Sources: app/api/proxy/route.ts:1-23, app/api/proxy/route.ts:47-52, package.json:54

Endpoint Parameters (POST Body):

Parameter	Type	Description
InputUrl	string	The target URL to request (Required).
method	string	HTTP Method (GET, POST, etc.).
headers	object	Key-value pairs of request headers.
body	string	The request payload (ignored for GET).

Sources: app/api/proxy/route.ts:27-44

SSL Certificate Check Route (/api/cert-check)

While the implementation details of /api/cert-check are consumed by the SSLToothbrush component, the route is responsible for fetching and parsing X.509 certificate data from a remote host or a provided PEM string.

Client-Side Integration:
The SSLToothbrush component sends either a host and port for live checks, or a certPem string for local parsing. The API returns detailed certificate metadata, including Subject Alternative Names (SANs), fingerprints, and validity dates.

Sources: components/tools/ssl-toothbrush.tsx:142-162, components/tools/ssl-toothbrush.tsx:166-186

Security and Validation

The API routes implement several security measures to protect the application:

1. Header Sanitization:

   for (const [key, value] of Object.entries(headers)) {
     if (typeof value === "string" && !/[\r\n]/.test(value)) {
       sanitized[key] = value;
     }
   }
   

   This loop prevents attackers from injecting extra headers or manipulating the HTTP response stream.
   Sources: app/api/proxy/route.ts:14-19

2. Request Aborting: To avoid resource exhaustion, the proxy service enforces a strict 30,000ms timeout on all outbound fetch calls.
   Sources: app/api/proxy/route.ts:48

3. Error Handling: Standardized error responses are returned using Response.json with appropriate HTTP status codes (400 for bad input, 500 for internal failures).
   Sources: app/api/proxy/route.ts:30, app/api/proxy/route.ts:74-78

Tool Integration Summary

The following table summarizes which frontend tools rely on specific API backend routes:

Tool Component	API Route	Purpose
CurlConverter	/api/proxy	Bypassing CORS to test API endpoints.
SSLToothbrush	/api/cert-check	Retrieving remote SSL/TLS certificate info.
WebSocketFishScaler	N/A	Uses native browser WebSocket API directly.

Sources: components/tools/curl-converter.tsx:236, components/tools/ssl-toothbrush.tsx:142, components/tools/websocket-fish-scaler.tsx:162

Conclusion

Next.js API Routes in DevUtils provide an essential backend layer for complex utility tools. By centralizing sensitive network logic in routes like /api/proxy, the project maintains a high degree of utility while managing security risks associated with arbitrary network requests and certificate parsing.