feat: 增加Nextjs模板

Author: yuhang1995

README.md

@@ -22,6 +22,20 @@
 
 Custom Template Generator is a VS Code extension designed to streamline your development process by automating the creation of repetitive file structures. It's particularly useful for developers who frequently create components or modules with a consistent file structure.
 
+It includes common Next.js file types (such as page, layout, template, error, not-found, route, global-error, middleware, etc.) to accelerate Next.js application development.
+
+## Table of Contents
+
+- [Introduction](#introduction)
+  - [Use Case Example](#use-case-example)
+- [Features](#features)
+- [Installation](#installation)
+- [Usage](#usage)
+  - [1. Using Next.js Templates (Currently only supports App Router)](#1-using-nextjs-templates-currently-only-supports-app-router)
+  - [2. Using Custom Templates](#2-using-custom-templates)
+    - [1. Configuring Templates](#1-configuring-templates)
+    - [2. Creating Structure](#2-creating-structure)
+
 ### Use Case Example
 
 Imagine you're developing a React application and often need to create new components. Each component typically requires:
@@ -38,10 +52,13 @@ Avatar/
 └── Avatar.tsx
 ```
 
+Manually creating this structure for each new component can be time-consuming. This extension allows you to create a template for this structure and generate it with just a few clicks, saving valuable development time.
+
 ## Features
 
 - Quickly create custom file and folder structures
 - Configure and manage reusable templates
+- Built-in Next.js templates (more frameworks will be supported in the future)
 - Support for placeholders in file names and contents
 
 ## Installation
@@ -53,14 +70,48 @@ Avatar/
 
 ## Usage
 
-### 1. Configuring Templates
+### 1. Using Next.js Templates (Currently only supports App Router)
+
+#### 1. Demo
+
+<div align="center">
+    <img src="https://github.com/yuhang1995/custom-template-generator/raw/HEAD/assets/nextjs-demo.svg" alt="Logo" width="150" />
+</div>
+
+<br>
+
+> Submenu Explanation:
+> 
+> - `App Router`: Create a Next.js page with customizable files, default creates Page, Layout, Loading, Error
+> - `Custom Structure`: Quickly add desired files in an existing folder, optional files include: Page, Layout, Loading, Error, NotFound, Middleware, Global Error, Route
+> - `Page`: Create a page.tsx file
+> - `Loading`: Create a loading.tsx file
+> - `Layout`: Create a layout.tsx file
+> - `Template`: Create a template.tsx file
+> - `Error`: Create an error.tsx file
+> - `Not Found`: Create a not-found.tsx file
+> - `Middleware`: Create a middleware.ts file
+> - `Global Error`: Create a global-error.tsx file
+> - `Route`: Create a route.ts file
+> - `Default`: Create a default.tsx file
+
+#### 2. Using Custom Templates
+
+1. Open VS Code
+2. Go to the Extensions view (Ctrl+Shift+X or Cmd+Shift+X)
+3. Search for "Custom Template Generator"
+4. Click the "Install" button
+
+### 2. Using Custom Templates
+
+#### 1. Configuring Templates
 
 1. Open the command palette (Ctrl+Shift+P or Cmd+Shift+P)
 2. Type "Configure Custom Templates" and select the command
 3. In the opened settings page, configure the `customTemplateGenerator.templates` setting
 4. Add your templates, each template should have `name` and `files` properties
 
-#### Example
+##### Example
 
 ```json
 "customTemplateGenerator.templates": [
@@ -80,7 +131,7 @@ Avatar/
 ]
 ```
 
-### 2. Creating Structure
+#### 2. Creating Structure
 
 1. Right-click in the folder to open the context menu
 2. Click `Create Custom Structure`

README.zh-CN.md

@@ -22,6 +22,20 @@
 
 自定义模板生成器是一个 VS Code 扩展，旨在通过自动化创建重复性文件结构来简化您的开发过程。它对于经常需要创建具有一致文件结构的组件或模块的开发者特别有用。
 
+内置Nextjs常见文件类型（如page、layout、template、error、not-found、route、global-error、middleware等）来加速Next.js应用程序的开发。
+
+## 目录
+
+- [简介](#简介)
+  - [使用场景示例](#使用场景示例)
+- [功能](#功能)
+- [安装](#安装)
+- [使用方法](#使用方法)
+  - [一、使用Nextjs模板(目前仅支持App Router)](#一使用nextjs模板目前仅支持app-router)
+  - [二、使用自定义模板](#二使用自定义模板)
+    - [1、配置模板](#1配置模板)
+    - [2、创建结构](#2创建结构)
+
 ### 使用场景示例
 
 想象一下，您正在开发一个 React 应用，经常需要创建新的组件。每个组件通常需要：
@@ -44,6 +58,7 @@
 
 -   快速创建自定义文件和文件夹结构
 -   配置和管理可重用的模板
+-   内置Nextjs模板（未来会支持更多框架）
 -   支持文件名和内容中的占位符
 
 ## 安装
@@ -55,14 +70,50 @@
 
 ## 使用方法
 
-### 1、配置模板
+### 一、使用Nextjs模板(目前仅支持App Router) 
+
+#### 1、使用演示
+
+<div align="center">
+    <img src="https://github.com/yuhang1995/custom-template-generator/raw/HEAD/assets/nextjs-demo.svg" alt="Logo" width="150" />
+</div>
+
+<br>
+
+> 子菜单说明：
+> 
+> - `App Router`：创建一个Nextjs页面，可自定义需要的文件，默认创建Page、Layout、Loading、Error
+> - `Custom Structure`：在已有文件夹中快速添加想要的文件，可选文件有：Page、Layout、Loading、Error、NotFound、Middleware、Global Error、Route
+> - `Page`：创建一个page.tsx文件
+> - `Loading`：创建一个loading.tsx文件
+> - `Layout`：创建一个layout.tsx文件
+> - `Template`：创建一个template.tsx文件
+> - `Error`：创建一个error.tsx文件
+> - `Not Found`：创建一个not-found.tsx文件
+> - `Middleware`：创建一个middleware.ts文件
+> - `Global Error`：创建一个global-error.tsx文件
+> - `Route`：创建一个route.ts文件
+> - `Default`：创建一个default.tsx文件
+
+
+#### 2、自定义模板
+
+1. 打开 VS Code
+2. 转到扩展视图 (Ctrl+Shift+X 或 Cmd+Shift+X)
+3. 搜索 "custom-template-generator"
+4. 点击 "安装" 按钮
+
+
+### 二、使用自定义模板
+
+#### 1、配置模板
 
 1. 打开命令面板 (Ctrl+Shift+P 或 Cmd+Shift+P)
 2. 输入 "Configure Custom Templates" 并选择该命令
 3. 在打开的设置页面中，配置 `customTemplateGenerator.templates` 设置
 4. 添加您的模板，每个模板应包含 `name` 和 `files` 属性
 
-#### 示例
+##### 示例
 
 ```json
 "customTemplateGenerator.templates": [
@@ -82,9 +133,9 @@
 ]
 ```
 
-### 2、创建结构
+#### 2、创建结构
 
-1. 在文件夹中右键打开菜单
+1. 在工作区文件夹中右键打开菜单
 2. 点击 `Create Custom Structure`
-3. 在打开的设置页面中，选择您想要的模板
+3. 选择您想要的模板
 4. 输入组件名称，然后按 `Enter` 确认