Next.js compatibility and React Server Components compatibility

[ADTC]

I'm wondering if this is fully compatible with Next JS (by Vercel) specifically, rather than just React. What kind of problems could you anticipate when using this with a Next.js 14 project?

Personally I prefer having react imports at the very top, then all next and next/* below it, but above other third-party imports. I hope this is possible with your plugin.

Thank you btw, for this plugin. I'm specifically looking for separate type imports, combining same source imports, finer "blank line" control, and also to avoid potential side-effect imports. Such are missing in the trivago version.

I'd suggest updating the Compatibility table, either by adding NextJS as a row, or just mentioning in the note of React row:

Framework	Supported	Note
React	✅ Everything	Includes Next.js

[IanVS]

As far as I know, next.js and other react frameworks are supported here so long as they are supported by prettier. There has been one issue opened about next.js (https://github.com/IanVS/prettier-plugin-sort-imports/issues/132), but there hasn't been a reproduction shared so we're not able to investigate further.

I don't really want to include notes about react frameworks in the compat table, I don't see why next.js should get any special treatment vs the other hundreds of react frameworks out there. I'd suggest trying it out and report back if you have any issues, and we can work to address them.

[ADTC]

How about 'use client' or 'use server' declaration which if present should be the first line of the file before any imports? Will that be kept where it should be? (Also I want a blank line under it before the first import.)

They are React Server Components related directives, actually. Not specific to Next JS. They must be at the very beginning of the file. It's a rule. If you feel like skimming the docs, here it is.

Also there is import 'server-only' and import 'client-only' which is like a special import that should also be at the top (I think - maybe that's just opinion, not a rule). If you feel like skimming the docs, here it is.

Also, not related to NextJS but I turned off semicolons in my Typescript (JavaScript). Does the plugin play nicely with this choice?

[IanVS]

We have a test to ensure that directives remain at the top of the file.

import 'server-only' and import 'client-only' are side-effect imports, and will not be re-arranged. Any imports above them will be sorted, and any below will be sorted, but nothing will move from one side to the other.

The plugin does not do any formatting of your code like adding or removing semicolons, that's left up to core prettier.

I strongly recommend that you start a new branch in your project, and add this plugin, and see what it does. It's easy to set up, and that will be the most reliable way of knowing whether it meets your needs.

[ADTC]

Thank you!