Next.js File Generator

Powerful file genetator extension designed to accelerate the development of Next.js applications by automating the creation of common file types, such as pages, layouts, templates, errors, not-found, route, global-errors, middlewares and more.

Built with ease of use in mind, it streamlines the setup of new routes and components, allowing developers to focus on building their applications faster.

💻 If you prefer terminal aproach for generating files?

next-cli-turbo - A Next.js CLI tool for generating files right from your terminal.

Usage

demo

Customizing Templates

The extension allows for the customization of file templates through VS Code's settings.

Navigate to Settings > Extensions > Next.js File Generator
Find Templates and click edit in settings.json
Modifying the settings.json under the nextFileGenerator.templates object.

This feature supports customization for all possible file types you can generate, allowing you to align the templates with your project's coding standards and structure seamlessly.

Example configuration:

Use ${name} within a template to insert the specified name dynamically.

"nextFileGenerator.templates": {
    "page": "export default function ${name}Page() { return <div>My Page</div>; }"
  },

Features

Quick File Generation: Generate Next.js files like pages, layouts, middleware, and more, with just a couple of clicks.
Customizable Templates: Use the extension's settings to customize file templates to match your coding style or project structure.
Multiple File Types: Supports generating .tsx, .jsx, .js, and .ts files, configurable through extension settings.