Next.js Folder

English | 中文

Next.js Folder is a VS Code extension for quickly creating React component folders and Next.js page folders.

It supports both Next.js routing styles:

• App Router: app/dashboard/page.tsx
• Pages Router: pages/dashboard/index.tsx

It also detects Tailwind CSS and skips CSS Module file generation when Tailwind is installed.

Features

• Create React component folders from Explorer or the Command Palette
• Create Next.js App Router pages
• Create Next.js Pages Router pages
• Auto-detect app, src/app, pages, and src/pages
• Prefer App Router automatically for Next.js 13+ projects when no route folder exists
• Generate TypeScript function component templates
• Generate CSS Module files with configurable extensions
• Skip style files when Tailwind CSS is detected
• Normalize names such as user-card into valid component names
• Use stable CSS Module class names with .root
• Prompt before writing into an existing target folder

Commands

Generated Component

Input:

user-card

Output without Tailwind CSS:

user-card/
├── index.tsx
└── index.module.scss

import Style from './index.module.scss';

interface UserCardProps {
    // define your props here
}

export default function UserCard(_props: UserCardProps) {
    return (
        <div className={Style.root}>
            UserCard Component
        </div>
    );
}

Output with Tailwind CSS:

user-card/
└── index.tsx

interface UserCardProps {
    // define your props here
}

export default function UserCard(_props: UserCardProps) {
    return (
        <div>
            UserCard Component
        </div>
    );
}

Generated Pages

App Router

Input:

dashboard

Output without Tailwind CSS:

app/dashboard/
├── page.tsx
└── page.module.scss

import Style from './page.module.scss';

export default function DashboardPage() {
    return (
        <main className={Style.root}>
            <h1>DashboardPage</h1>
            <p>This is the DashboardPage page</p>
        </main>
    );
}

Pages Router

Input:

dashboard

Output without Tailwind CSS:

pages/dashboard/
├── index.tsx
└── index.module.scss

import type { GetServerSideProps } from 'next';
import Style from './index.module.scss';

interface DashboardPageProps {
    // define your props here
}

export default function DashboardPage(_props: DashboardPageProps) {
    return (
        <div className={Style.root}>
            <h1>DashboardPage</h1>
            <p>This is the DashboardPage page</p>
        </div>
    );
}

export const getServerSideProps: GetServerSideProps = async (_ctx) => {
    return {
        props: {
            xdata: null,
        },
    };
};

Router Detection

The page command uses this order:

1. Use the configured nextjsFolder.routerMode when it is app or pages.
2. If the selected folder is inside app, src/app, pages, or src/pages, use that router mode.
3. If only one router folder exists, use it.
4. If both router folders exist, ask which one to use.
5. If no router folder exists and Next.js is 13 or newer, use App Router.
6. Otherwise use Pages Router.

Tailwind CSS Detection

The extension searches upward from the selected folder and detects Tailwind CSS from:

• tailwindcss in dependencies, devDependencies, or peerDependencies
• @tailwindcss/postcss in dependencies
• tailwind.config.js
• tailwind.config.cjs
• tailwind.config.mjs
• tailwind.config.ts

When Tailwind CSS is detected, VS Code shows:

Tailwind CSS detected, style file skipped.

Configuration

{
  "nextjsFolder.routerMode": "auto",
  "nextjsFolder.styleFileExtension": ".scss"
}

nextjsFolder.routerMode

Controls the router mode used by the page command.

Supported values:

• auto
• app
• pages

nextjsFolder.styleFileExtension

Controls generated CSS Module file extensions.

Supported values:

• .scss
• .css
• .less
• .sass

The old simpleReactFolder.styleFileExtension setting is still read for compatibility, but nextjsFolder.styleFileExtension is preferred.

Development

Install dependencies:

pnpm install

Compile:

pnpm run compile

Package:

pnpm run package

Requirements

• VS Code 1.80.0 or higher
• Node.js 16.0.0 or higher for development
• pnpm for local development

License

MIT