It seems over time I've landed on something like this:
Because I stick to this structure for my imports, my mental model of what all is being included in a page is clear, or if not clear, easy to reason about.
I event implicitly order imports within the sections. For instance in my 3rd party packages, it's React imports first, then anything from the larger framework, in this case Next.js. There's no order after that, but I always put the framework imports at the tope.
Need to add a new package, just put it in the correct section and move on with your day.
I've also noticed that I usually don't have default exports for utils, but almost always do for components.
Update (Oct. 13th, 2021)
I found a prettier plugin from Trivago which does exactly this.
npm i -D @trivago/prettier-plugin-sort-imports
Then I added this to my
"importOrder": [ "^(next|react).*$", "^(?!next|react|@components|@hooks|@util|@styles|~types).*(?<!css)$", "^(?!next|react|@components|@hooks|@util|@styles|~types).*.css$", "^@components/.*$", "^@hooks/.*$", "^@util/.*$", "^@styles/.*$", "^~types/.*$" ], "importOrderSeparation": true