bump nextjs to 15.5 and turbopack for development mode

[17hz]

Summary

close #19179
close #20696
close #23304

Now, try to upgrade nextjs to 15.5.2, and enable turbopack for development mode. I tested it myself and found that the development compilation speed is at least improved by 70% ⚡, with a good DX experience.

And now the code-inspector-plugin is also working as expected. According to the latest version 1.2.6 documentation

// next.config.js
import type { NextConfig } from 'next';
import { codeInspectorPlugin } from 'code-inspector-plugin';

const nextConfig: NextConfig = {
  turbopack: {
    rules: codeInspectorPlugin({
      bundler: 'turbopack',
    }),
  },
};

export default nextConfig;

Screenshots

Before	After

Checklist

• This change requires a documentation update, included: Dify Document
• I understand that this PR may be closed in case there was no previous discussion or issues. (This doesn't apply to typos!)
• I've added a test for each change that was introduced, and I tried as much as possible to make a single atomic change.
• I've updated the documentation accordingly.
• I ran dev/reformat(backend) and cd web && npx lint-staged(frontend) to appease the lint gods

[hjlarry]

The code-inspector-plugin plays a crucial role in current front-end development, which is why this PR (#20696) has been in draft for such a long time. :)

[17hz]

The plugin author is actively following up on this issue, and I believe it will be resolved soon. 😊

[17hz]

@hjlarry @crazywoola
If we really need to stick with this plugin, the plugin-level issue has been resolved in the latest version 1.2.3, but Turbopack’s support for custom loaders with middleware is still problematic. This is a known Next.js issue vercel/next.js#79592 ( 🤷‍♀️ though it has been on hold for quite some time). I tried removing middleware.ts, and the project runs fine — the plugin also works as expected.

Since our middleware logic could be handled by Nginx, replacing middleware with Nginx would let us adopt Turbopack right away and improve DX. Could this be a practical workaround worth considering?

[hjlarry]

Thank you for the detailed research and proposal.

Since I’m not very familiar with the frontend ecosystem, I consulted AI about using Nginx to replace the middleware. It seems that integrating our current nonce-based CSP strategy in Nginx might be challenging?

If this approach can enhance our DX without compromising our security policies, I believe it will gain approval from our community.

[17hz]

I came up with a possible approach: filtering out Turbopack loader’s handling of middleware. Since Turbopack doesn’t yet provide a way to define rules like exclude or regex (though I noticed a related PR vercel/next.js#78733 has already been merged and might be available in the canary release), the temporary workaround is to remove .ts files from the plugin’s pattern '**/*.{jsx,tsx,js,ts,mjs,mts}'. This shouldn’t affect the component inspection we need, as they are usually .tsx files anyway. What do you think?

[hjlarry]

COOL! Now both Turbopack and Code Inspector are functioning properly, but when I open a workflow app, it raises an issue.

## Error Type
Console Error

## Error Message
Functions are not valid as a React child. This may happen if you return Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.
  <div>{Component}</div>


    at div (unknown:0:0)
    at WorkplaceSelector (app/components/header/account-dropdown/workplace-selector/index.tsx:34:5)
    at Header (app/components/header/index.tsx:95:11)
    at Layout (app/(commonLayout)/layout.tsx:23:19)

## Code Frame
  32 |
  33 |   return (
> 34 |     <Menu as="div" className="min-w-0">
     |     ^
  35 |       {
  36 |         ({ open }) => (
  37 |           <>

Next.js version: 15.5.0 (Turbopack)

Did you encounter this error?

[17hz]

Yeah, it looks like the issue is caused by the plugin injecting code in the wrong place. This kind of pattern would indeed throw an error in React.

[17hz]

@hjlarry All the known issues have been resolved, so we can give Turbopack speed another try 🤔 .

[hjlarry]

Clicking this button triggers the following exception, and the issue persists until the frontend server is restarted. ~

[17hz]

let me see, its due to the compatibility issue with the mdx loader, we can first ignore it and then try it.

[ZeroZ-lab]

A truly remarkable PR, thank you so much!

[zh-lx]

@17hz The problem about dynamic path has been resolved by 1.2.9. welcome to try it.

[17hz]

@zh-lx 👍 works perfectly, a nice update.

[hjlarry]

LGTM
I tried lots of pages on the newest main branch, I think you guys can try it either @ZeroZ-lab @crazywoola

[crazywoola]

LGTM I tried lots of pages on the newest main branch, I think you guys can try it either @ZeroZ-lab @crazywoola

I will merge it later after the 1.9.0.

[JeeekXY]

Any url missing? @crazywoola