DEV Community

Kristiyan Velkov
Kristiyan Velkov

Posted on • Originally published at Medium

Next.js File Generator VS code extension

Image description

Hello everyone, I’m so happy to share with you that I manage to create a Next.js file generator for VS code. 🚀 I put a lot of effort to be able to create a extension and will be really grateful if you review it and use it! 😍

🔗Link


What is Next.js File Generator

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.

💻 If you prefer terminal approach for generating files?

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


Customizing Templates
The extension allows for the customization of file templates through VS Code’s settings.

1.Navigate to Settings > Extensions > Next.js File Generator
2.Find Templates and click edit in settings.json

  1. 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:

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

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.

Developer Support:

  • If you saw some issue/bug 🐛 related to the specific release version.
  • If you want some new feature or change to be added/implemented. 😊

Please, contact the creator of the Next.js File Generator, so he will be able to fix or improve it:

Take a look in my Open source projects:

Top comments (0)