Dynamic Import Converter for Next.js

The best extension for convert import to dynamic import Next js from the popular YouTube channel RED Group and the learning platform htmllessons.io

This VS Code extension allows you to quickly convert static imports into dynamic imports for Next.js. It streamlines the process by automatically generating the appropriate dynamic import statements, including options for server-side rendering (SSR).

Features

• Convert regular imports to dynamic imports with a single command.
• Option to generate dynamic imports with SSR disabled.
• Supports both named and default imports.

Usage

1. Convert to Dynamic Import

   • Highlight the static import statement you want to convert.
   • Open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P on macOS).
   • Search for and select Convert to Dynamic Import.
   • The selected import will be converted to a dynamic import.

2. Convert to Dynamic Import with SSR Disabled

   • Highlight the static import statement you want to convert.
   • Open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P on macOS).
   • Search for and select Convert to Dynamic Import with SSR false.
   • The selected import will be converted to a dynamic import with SSR disabled.

Example

Before Conversion

import { CustomToast } from './CustomToast'
import MyComponent from './MyComponent'

After Conversion

Using the Convert to Dynamic Import command:

const DynamicCustomToast = dynamic(() =>
	import('./CustomToast').then(mod => mod.CustomToast)
)
const DynamicMyComponent = dynamic(() => import('./MyComponent'))

Using the Convert to Dynamic Import with SSR false command:

const DynamicCustomToast = dynamic(
	() => import('./CustomToast').then(mod => mod.CustomToast),
	{ ssr: false }
)
const DynamicMyComponent = dynamic(() => import('./MyComponent'), {
	ssr: false
})

Installation

1. Open VS Code.
2. Go to the Extensions view (Ctrl+Shift+X or Cmd+Shift+X on macOS).
3. Search for Dynamic Import Converter for Next.js.
4. Click Install.

Contributing

Contributions are welcome! However, copying this extension in whole or in part is not allowed. Feel free to open an issue or submit a pull request on GitHub for improvements or bug fixes.

License

This project is licensed under the MIT License. Note: Copying this extension, either in whole or in part, is prohibited.

Development by htmllessons.io