Next.js Plop Templates

Plop templates for Next.js 14 , supporting both TypeScript and JavaScript.

Features

• Templates for React components
• Templates for Next.js API routes
• Templates for Next.js pages
• Support for both TypeScript and JavaScript
• Dynamic route generation
• Customizable component structure (atoms, molecules, organisms)

Installation

First, ensure you have Plop installed:

1npm install --save-dev plop

Then, install this package in your project:

1npm install --save-dev nextjs14-plop-templates

Usage

1. Create a plopfile.js in your project root if you don't already have one.

2. Add the following to your plopfile.js:

1const nextjsGenerators = require("nextjs14-plop-templates");
2
3module.exports = function (plop) {
4  nextjsGenerators(plop);
5};

3. Run Plop in your terminal:

1npm run plop

4. Choose the generator you want to use:

   • Component
   • API
   • Page

5. Follow the prompts to generate your files.

Compatibility

This package is compatible with:

• Next.js 14
• Next.js 15

The templates and generators provided by this package are designed to work with Next.js 14 and 15. They should continue to function correctly unless there are significant structural changes in future Next.js releases.

Generators

Component Generator

Creates a new React component.

Options:

• Component name
• Component type (atom, molecule, organism, or none)
• TypeScript or JavaScript

Example output:

1import { ReactElement } from "react";
2
3type ButtonProps = {};
4
5const Button = ({}: ButtonProps): ReactElement => {
6  return <div>Button</div>;
7};
8
9export default Button;

API Route Generator

Creates a new Next.js API route.

Options:

• Route name
• HTTP methods (GET, POST, PUT, DELETE)
• Dynamic routes

Example output (with dynamic route "id"):

1import { NextRequest, NextResponse } from "next/server";
2
3export async function GET(request: NextRequest, { params }: { params: { id: string } }) {
4  const id = params.id;
5  // Your GET logic here
6  return NextResponse.json({ message: `GET request for id: ${id}` });
7}
8
9export async function POST(request: NextRequest, { params }: { params: { id: string } }) {
10  const id = params.id;
11  // Your POST logic here
12  return NextResponse.json({ message: `POST request for id: ${id}` });
13}
14
15// Add other methods (PUT, DELETE) as needed

Page Generator

Creates a new Next.js page.

Options:

• Page name
• Dynamic routes

Example output:

1import { ReactElement } from "react";
2
3export default function Page(): ReactElement {
4  return (
5    <div>
6      <h1>Hello World</h1>
7    </div>
8  );
9}

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License.