Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>Next.js App Router Component HelperNew to Visual Studio Code? Get it now.
Next.js App Router Component Helper

Next.js App Router Component Helper

Ali Bassiouni

|
1,240 installs
| (0) | Free
Shows whether a component is a server component or client component in Next.js App router
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Next.js App Router Component Helper - VS Code Extension

Knowing whether a component runs on the server or the client can get very confusing as your Next.js project grows. This VS Code extension is designed to help developers working on Next.js projects identify whether a component is a server component or a client component inside the App router.

All components are considered server components by default unless they contain the 'use client'; directive at the top of the file or are imported into another client component.

This extension ignores files inside the pages folder.

Usage

  1. Open your Next.js project in VS Code. The extension will automatically start scanning your project.
  2. Wait for the initial scan to complete. An information message will inform you when the scan is complete.
  3. Start working on a component file. The status bar will display whether the file is a client or server component.
  4. Click the status bar item to trigger a manual scan (Useful when adding components to the project)

Example

Limitations

  • As of the current version, this extension considers a file to be a "component" if it is a .jsx or .tsx file that has a default export. It does not consider .js or .ts files to be components.
  • May not work on all import aliases.

Contributing

Pull requests are welcome and encouraged! Thanks for checking out this project! 🎉

License

MIT

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft