[docs] Fix Next.js hosting on mui.com

[bharatkashyap]

• I have followed (at least) the PR section of the contributing guide.

See #660

https://deploy-preview-661--mui-toolpad-docs.netlify.app/toolpad/

[render]

Your Render PR Server URL is https://toolpad-pr-661.onrender.com.

Follow its progress at https://dashboard.render.com/web/srv-cb8nk8rvog4l97ebo3b0.

[oliviertassinari]

this doesn't seem to work, the assets are still hosted under the conflicting folder:
https://deploy-preview-661--mui-toolpad-docs.netlify.app/_next/static/chunks/871-bbf549ab618193c5.js. We have only customized the build folder location, not the URLs.

[oliviertassinari]

Based on the nature of the problem that we are trying to solve: scoping. I think that we should bring more context. Maybe something like this:

Suggested change

	distDir: 'dist',
	distDir: '_next/toolpad',

[Janpot]

I think the basePath option is meant for exactly this purpose, scoping.

[oliviertassinari]

I think the basePath option is meant for exactly this purpose, scoping.

I had a quick look at this in vercel/next.js#31718 (comment)

[oliviertassinari]

I suspect that we need assetPrefix: isProduction ? '/toolpad/_next' : '' which in https://github.com/mui/material-ui/blob/62a777e6ea4dd13c5e9f369b6c843a389b160dda/docs/public/_redirects#L401 would need:

/toolpad/_next/* https://mui-toolpad-docs.netlify.app/_next/:splat 200

It's not awesome because it would mean that the previews in the production deploy would be broken https://app.netlify.com/sites/mui-toolpad-docs/overview. I couldn't find anything better to make it work in production. I have commented in #660 what I have explored.

[render]

Your Render PR Server URL is https://toolpad-pr-661.onrender.com.

Follow its progress at https://dashboard.render.com/web/srv-cbcjpasgqg4c3s69a2dg.

[bharatkashyap]

b46dc1e

Using the NETLIFY environment variable to differentiate when to add the assetPrefix, along with a redirect rule from /toolpad/_next to /_next in the docs folder for the Netlify site seems to do the trick, as the latest preview shows

[oliviertassinari]

@bharatkashyap Ah smart. 👍 from my side, we avoid the limitation of point 3 in #660.

---

I think that we have two steps left:

• To clean up this PR, I think that we should revert the change of the build folder from docs/.next to docs/dist it doesn't help.

• For mui.com, I think that we need to be aware of:

  By default, we limit internal rewrites to one “hop” — you cannot proxy from Netlify SiteA to Netlify SiteB to Netlify SiteC in a single request. This limitation may be amended for customers on a case-by-case basis. Contact support for more information.

  https://docs.netlify.com/routing/redirects/rewrites-proxies/#shadowing

  To avoid 2 hops for the JavaScript requests:

  • starting from https://mui.com/toolpad/_next/static/chunks/framework-1bf860015beb9572.js
  • redirected to https://mui-toolpad-docs.netlify.app/toolpad/_next/static/chunks/framework-1bf860015beb9572.js
  • to finally be resolved at https://mui-toolpad-docs.netlify.app/_next/static/chunks/framework-1bf860015beb9572.js

  we would need to update https://github.com/mui/material-ui/blob/62a777e6ea4dd13c5e9f369b6c843a389b160dda/docs/public/_redirects#L401 to have a single hop:

  /toolpad/_next/* https://mui-toolpad-docs.netlify.app/_next/:splat 200
  

[bharatkashyap]

To clean up this PR, I think that we should revert the change of the build folder from docs/.next to docs/dist it doesn't help.

Yes, have done that

/toolpad/_next/* https://mui-toolpad-docs.netlify.app/_next/:splat 200

mui/material-ui#33524

[oliviertassinari]

👌