next-genx is a tool that helps you automatically generate API and page files in the Next.js framework. This is particularly useful when you have numerous API files, as next-genx helps you organize them and simplify the calling process.
PROJECT_DIR
src/
-- app/
-- api/
-- dashboard/
-- else/
next-genx will automatically detect and generate routes or pages based on the structure.
npm install -g next-genx
Ensure you are in the root of your project directory.
To generate API files:
next-genx api
To generate page files:
next-genx page
To generate a specific API file with a custom path and file name:
next-genx api -n /path/file_name
Create a file at /util/app_config.ts
for server or client distinction:
import os from 'os';
const app_config = {
title: 'Example Title',
description: 'Example Description',
host: os.platform() === 'darwin' ? 'http://localhost:3005' : 'https://example.com',
isLocal: os.platform() === 'darwin',
};
export default app_config;
The generated code for API calls will be structured as follows:
import app_config from "@/util/app_config";
export const gen_api = {
/**
* [/Users/yourusername/projects/yourproject/src/app/api/users/route.ts](file:///Users/yourusername/projects/yourproject/src/app/api/users/route.ts)
*/
users: async ({isServer}: {isServer?: boolean}) => {
return fetch(`${isServer ? app_config.host : ''}/api/users/`, { method: 'GET', cache: 'no-cache' })
.then(res => res.json());
},
/**
* [/Users/yourusername/projects/yourproject/src/app/api/test/route.ts](file:///Users/yourusername/projects/yourproject/src/app/api/test/route.ts)
*/
test: async ({isServer}: {isServer?: boolean}) => {
return fetch(`${isServer ? app_config.host : ''}/api/test/`, { method: 'GET', cache: 'no-cache' })
.then(res => res.json());
}
}
// create interface for body
interface BODY {
name: string
}
export async function POST(req: Request) {
const body = await req.json() as BODY
if (!body.name) return new Response('Bad Request', { status: 400 })
....
RESULT
appListProjectApp: async ({ isServer, body }: { isServer?: boolean, body: { name: string } }) => {
return fetch(`${isServer && app_config.host || ''}/api/app/list-project/app/`, { method: 'POST', body: JSON.stringify(body), cache: 'no-cache' })
.then(res => res.json());
}
- Automatic Detection: Automatically detects and generates API and page files based on your project structure.
- Custom Configuration: Easily configure server and client settings.
- Streamlined Workflow: Simplifies the management and calling of numerous API endpoints.
We welcome contributions! Please read our Contributing Guidelines for more information on how to get started.
This project is licensed under the MIT License. See the LICENSE file for more details.
For any issues or questions, please open an issue on GitHub.
Happy coding with Next-gen! 🚀