Auto Dynamic Importer
Auto Dynamic Importer is a Visual Studio Code extension that helps you quickly refactor your standard React component imports into Next.js dynamic imports. This is particularly useful for optimizing your Next.js application by lazy-loading components, which can improve initial page load times.
Features
- One-Click Conversion: Convert single or multiple standard React
import statements into Next.js dynamic imports instantly.
- SSR Control: Choose to import components with Server-Side Rendering (SSR) enabled or disabled (
{ ssr: false }).
- Command Palette Integration: Access conversion commands directly from the VS Code command palette.
- Convenient Keybinding: Use a simple keyboard shortcut (
Alt+I on Windows/Linux, Ctrl+I on macOS) to trigger the conversion.
- Automatic Auto-Import Refactoring: The extension can automatically convert a standard import to a dynamic one right after it's added by VS Code's auto-import feature.
- Multi-Selection Support: Refactor multiple import statements across different parts of your file at once.
How It Works
The extension parses the selected lines in your active editor. For each line that contains a valid JavaScript/TypeScript import statement for a component, it replaces it with the corresponding dynamic import syntax. It also automatically adds the required import dynamic from 'next/dynamic'; at the top of the file if it's not already present.
Before:
import MyComponent from '../components/MyComponent';
import AnotherComponent from '@/components/AnotherComponent';
After (default SSR enabled):
import dynamic from 'next/dynamic';
const MyComponent = dynamic(() => import('../components/MyComponent'));
const AnotherComponent = dynamic(() => import('@/components/AnotherComponent'));
After (SSR disabled):
import dynamic from 'next/dynamic';
const MyComponent = dynamic(() => import('../components/MyComponent'), { ssr: false });
const AnotherComponent = dynamic(() => import('@/components/AnotherComponent'), { ssr: false });
Quick Reference
| Command Name |
Command ID |
Output Example |
| Import as Dynamic Component |
next-dynamic-importer.convertToDynamicImport |
const MyComponent = dynamic(() => import('../MyComponent')); |
| Import as Dynamic Component (SSR false) |
next-dynamic-importer.convertToDynamicImportSSRFalse |
const MyComponent = dynamic(() => import('../MyComponent'), { ssr: false }); |
Commands
You can access the following commands via the Command Palette (Ctrl+Shift+P or Cmd+Shift+P):
Next: Import as Dynamic Component: Converts the selected import statement(s) to a dynamic import.Next: Import as Dynamic Component (SSR false): Converts the selected import(s) to a dynamic import with SSR disabled.
Keybindings
- Windows/Linux:
Alt + I
- macOS:
Ctrl + I
This keybinding is linked to the Next: Import as Dynamic Component command.
Usage
Select: Highlight one or more import statements you want to convert.
Activate:
- Press the keybinding (
Alt+I / Ctrl+I).
- OR open the Command Palette (
Ctrl+Shift+P or Cmd+Shift+P) and run one of the "Next: Import..." commands.
- OR simply let VS Code's auto-import add a new component import, and the extension will convert it automatically.
Installation
- Open Visual Studio Code.
- Go to the Extensions view (
Ctrl+Shift+X or Cmd+Shift+X).
- Search for
Auto Dynamic Importer.
- Click Install.
Contributing
Found a bug or have a feature request? Please open an issue on the GitHub repository.
📄 License
MIT License
