Just Another VSCode React NextJS File Generator

A VSCode extension to effortlessly generate React and Next.js files with customizable templates.

✨ Features

• Automatically generate React components with SCSS modules and test file
• Supports NextJS file structure
  • Loading
  • Error
  • Page
  • Layout
• Customizable templates
• Integration with VSCode commands
• Snippets for React/Next components

Explorer Context Menu

🔧 Snippets

🛠️ Installation

There are several ways to install.

• Install from the Visual Studio Marketplace.
• From the VS Code Extensions view (Ctrl+Shift+X) or (Cmd+Shift+X), search for VSCode React NextJS Generator.
• Run ext install mikerheault.vscode-react-nextjs-generator in the command palette (Ctrl+Shift+P) or (Cmd+Shift+P).

▶️ Demo

Create React Component

Create Next Layout File

Example Snippet

⚙️ Configuration/Settings

import React from 'react';

export default async function Page({params,searchParams,}: {
params: { slug: string | string[] };
searchParams: { [key: string]: string | string[] | undefined };
}) {
  return (
    <div>
    <h1>Page</h1>
    </div>
  );
};

export async function generateMetadata({
params,
searchParams,
}: {
params: { slug: string | string[] };
searchParams: { [key: string]: string | string[] | undefined };
}): Promise<Metadata | undefined> {
  return {};
}

import React from 'react';

export default async function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
  return (
    <div>
    <header>Header</header>
    <main>{children}</main>
    <footer>Footer</footer>
    </div>
  );
};

import React from 'react';

export default function Error() {
  return (
    <div>
    <h1>Error: Something went wrong</h1>
    </div>
  );
};

import React from 'react';

export default function Loading() {
  return (
    <div>
    <h1>Loading...</h1>
    </div>
  );
};

import React from 'react';
import styles from './{fileName}.module.css';

export type {fileName}Props = {{}};

export const {fileName}: React.FC<{fileName}Props> = () => {{
  return (
    <div className={styles.container}>
      {fileName} Component
    </div>
  );
}};

.container {
/_ Add your styles here _/
}

import React from 'react';
import { render } from '@testing-library/react';
import {fileName} from '../{fileName}';

test('renders {fileName} component', () => {{
  render(<{fileName} />);
}});

👨‍💻 Usage

1. Generate a React Component:

• Right-click on a folder in the Explorer.
• Select React/Next Generator > Generate React Component.
• Follow the prompts to create a new React component with SCSS module and test file.

2. Generate a Next.js (Page, Loading, Layout, Error) file:

• Right-click on a folder in the Explorer.
• Select React/Next Generator > Generate Next.js {type} File.
• Choose the desired file type (e.g., Page, Loading, Layout, Error).

3. Use Snippets:

• Open a JavaScript or TypeScript file.
• Type the snippet prefix (e.g., rimr, rfc, nxpg) and select the desired snippet from the suggestions.

🤝 Contributing

Contributions are welcome!

📜 License

Licensed under the MIT License.

🚨 Support

For issues or feature requests, file an issue.

📢 Release Notes

Change log here