Comments (10)
This is now fully supported (not experimental) in Nextjs. is this something that will be eventually added / supported? I would like to consider moving an app to netlify but currently it does use nextjs redirects and rewrites and so would be tricky not having those work anymore if I decide to move it =) thank you! happy netlify client ;)
from next-runtime.
Hey @scopsy,
Thank you for the kind words and for filing this issue to make next-on-netlify
better 🙂
I had a closer look at the NextJS experimental syntax for redirects and rewrites as well as the limitations that apply to redirects on Netlify. There are a couple issues:
Netlify's redirect syntax is a lot more narrow than the one used by NextJS
Netlify only supports redirects with plain text, with parameter placeholders (/:id/:slug/:abc/...
), and/or with match-all splats (/some/path/*
). For example, the last rewrite you shared would not work on Netlify:
`/:locale((?!${noRedirectBasePaths.join('|')})[^/]+)(.*)`
There is no direct way to express that in a Netlify-compatible way. With Netlify, you would probably define it as a catch-all /*
rewrite and position it after all other rewrites and redirects. Because Netlify only uses the first redirect/rewrite it finds and because of shadowing, Netlify would not apply the rewrite in any case where the user requests a page that actually exists.
So it's possible to express the same rewrite in Netlify, but I can't think of a way to automatically translate a redirect like the one you shared into the Netlify equivalent, correctly deciding if the rewrite should be at the very top or the very bottom of the list.
Netlify only redirects/rewrites once per request
I need to double check this, but my understanding is that Netlify only redirects or rewrites once per request. All server-side rendered pages and all pages with dynamic paths already require one redirect. For example, we may have a SSRed page called /users
. That page gets turned into a serverless function and next-on-netlify
creates a redirect for /users
to /.netlify/functions/next_users
. Now, if we try to add a redirect for /allusers
to /users
, Netlify will perform only that redirect, but not the /users -> /.netlify/functions/next_users
one. It will try to serve users.html from the publish directory (out_public
), not find it, and return 404.
One way to correct for that would be to evaluate the redirects at build-time. For example: next-on-netlify
sees a redirect for /allusers
to /users
and next-on-netlify
knows that we need to redirect /users
to /.netlify/functions/next_users
, so next-on-netlify
writes the redirect as /allusers > /.netlify/functions/next_users
. But that only works if the redirects are static. As soon as they are dyamic, using /:params
or *
-splat, this kind of evaluation becomes very difficult/impossible.
Next Steps
What do you think? Do you have ideas for how this could work? In your specific case, you could just work around it for now: The first two redirects are not needed for Netlify (because they normalize the URLs and trailing slashes anyway) and the last two rewrites you could manually add as one single rewrite in your netlify.toml
:
[[redirects]]
from = "/*"
to = "/.netlify/functions/next_api_autoRedirectToLocalisedPage"
status = 200
It would catch any unmatched path and call your API endpoint. Not what you were hoping for, I'm sure, but that's my best idea at the moment.
Let me know what you think!
- Finn
from next-runtime.
To be clear: custom header in next.config.js are not supported?
headers: async () => {
return [
{
source: "/(.*\\.(?:jpg|jpeg|png|gif))",
headers: [
{
key: "Cache-Control",
value: "public, max-age=3600",
},
],
},
]
},
from next-runtime.
Hi all,
jumping on this issue because we're facing a possibly related problem: We want to create a rewrite to our api routes using the netlify.toml file, looking like this:
[[redirects]]
from = "/custom-api-route/*"
to = ""/api/:splat"
status = 200
However, it seems like all of the requests to /custom-api/*
end up with a 404 status. Possibly because the nextjs api routes itself are already configured as rewrites in the generated toml file by the nextjs plugin for netlify?
Is this a known issue or am I doing something wrong? When I configure non-api route redirects in the netlify.toml file, everything works as expected 🤔
from next-runtime.
Fixed in version 4
from next-runtime.
i have the same problem of @scopsy
from next-runtime.
i need the rewrites next.config.js
from next-runtime.
I cannot for the life of me get a CSP header set on the root page of my nextjs/netlify app.
next.config.js:
async headers() {
return [
{
source: '/',
headers: [
{
key: 'Content-Security-Policy',
value: "default-src 'self';",
},
]
}
];
},
netlify.toml
[[headers]]
for = "/*"
[headers.values]
Content-Security-Policy = "default-src 'self';"
_headers
/*
Content-Security-Policy: default-src 'self';
Any guidance? thx
from next-runtime.
I cannot for the life of me get a CSP header set on the root page of my nextjs/netlify app.
next.config.js:
async headers() { return [ { source: '/', headers: [ { key: 'Content-Security-Policy', value: "default-src 'self';", }, ] } ]; },
netlify.toml
[[headers]] for = "/*" [headers.values] Content-Security-Policy = "default-src 'self';"
_headers
/* Content-Security-Policy: default-src 'self';
Any guidance? thx
Having similar issue, any resolution?
from next-runtime.
I cannot for the life of me get a CSP header set on the root page of my nextjs/netlify app.
next.config.js:async headers() { return [ { source: '/', headers: [ { key: 'Content-Security-Policy', value: "default-src 'self';", }, ] } ]; },
netlify.toml
[[headers]] for = "/*" [headers.values] Content-Security-Policy = "default-src 'self';"
_headers
/* Content-Security-Policy: default-src 'self';
Any guidance? thx
Having similar issue, any resolution?
I cannot for the life of me get a CSP header set on the root page of my nextjs/netlify app.
next.config.js:async headers() { return [ { source: '/', headers: [ { key: 'Content-Security-Policy', value: "default-src 'self';", }, ] } ]; },
netlify.toml
[[headers]] for = "/*" [headers.values] Content-Security-Policy = "default-src 'self';"
_headers
/* Content-Security-Policy: default-src 'self';
Any guidance? thx
Having similar issue, any resolution?
Hey, Have you solved this problem? I encountered it too
from next-runtime.
Related Issues (20)
- [Bug]: `Runtime.ImportModuleError - Error: Cannot find module 'follow-redirects'` when deploying with netlify-cli and pnpm HOT 5
- [Bug]: `Error: Cannot find module 'next/dist/server/future/route-modules/pages/vendored/contexts/amp-context'` in NextJS preview mode HOT 38
- [Bug]: Cannot find module 'styled-jsx/style' HOT 7
- [Bug]: Middleware rewrites cause `TypeError: Invalid URL` when pointing to a directory in `public` HOT 2
- [Bug]: Middleware rewrites cause infinite redirect loop when pointing to a directory in `public` HOT 1
- [bug]: `netlify dev` fails to run middleware
- Cache headers returned from Middleware aren't respected HOT 7
- [Bug]: next.config.js > redirects is not respected HOT 7
- [Bug]: NextJS server page query param is not an array as expected HOT 1
- [Bug]: Error: Cannot find module 'next/dist/server/future/route-modules/pages/vendored/contexts/router-context' HOT 3
- [Bug]: ISR and next/link Prefetch Cause RSC Page Return Content in self.__next_f.push Function With App Dir on Next.js 14.0.3 HOT 2
- Failure toinstall[Bug]: HOT 2
- [Bug]: React Context not persisting across client side page transitions. App router. HOT 3
- [Bug]: Server actions not working with static rendering on Netlify
- [Bug]: API Routes return 502 due to Headers reference error HOT 1
- [Bug]: @netlify/plugin-nextjs is messing up everything HOT 2
- [Bug]: ENOENT internal error with monorepo setup HOT 7
- [Bug]: Plugin "@netlify/plugin-nextjs" internal error: ENOENT: no such file or directory with runtime 5.0.0-beta.7 HOT 9
- [Bug]: Issue with data revalidation after new build HOT 3
- [Bug]: NETLIFY_NEXT_PLUGIN_SKIP no longer works in v5 HOT 7
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from next-runtime.