I am proxying part of my site to a 'new' nextjs page, as such all my assets, images etc... are messing up because the pathing is wrong.
So, I used "assetPrefix" for the css/js files, BUT all my images and api's are wrong, so I am trying to do a rewrite and its not working...
Is there a way to have next be able to ignore the host (that is proxing) and just use its own domain.. for instance, all the assets are: https://preview.mysite.com (current site), but I want it to use its "real domain" -- https://previewnext.mysite.com
async rewrites() {
return [
{
source: 'https://preview.mysite.com/_next/image*',
destination: 'https://previewnext.mysite.com/_next/image*'
},
basically, if the path is: https://preview.mysite.com/_next/image?, which is my current domain that proxies the nextjs site, SO I need the nextjs site to actually rewrite those image assets to: https://previewnext.mysite.com/_next/image*
Seems a huge limitation to not be able to use absolute paths for rewrites.
Related
I explain you my situation,
I have a website that we'll called website-a.com that is link to my personal project.
On this project, every users can have a page, with the url my-project.com/[username]. So the urls will then be my-project.com/user1, my-project.com/user2, ...
For the context, I'm building it in Next JS, with the following code architecture :
--
pages
-- [username]
-- index.tsx
-- about.tsx
--
And I'm using Nginx with pm2 and a proxy pass that points to my http://localhost:3000
Now, I'd like to redirect a second domain name to a specific page of a user.
So I would like that when I go to user1.com, it displays my-project.com/user1 without modifying the url.
I pointed the DNS of user1.com to my server, I created a new host nginx and I made a proxy_pass to http://localhost:3000/user1. It's working, but I don't have the ressources css and js, because next is trying to load them from user1.com and they don't exists (user1.com/css/abc.css, ...).
I also tried to modify the build-manifest.json in the .next folder created after the build and it didn't work
So either I would like to find a way for Next JS to take the resources from my-project.com even if it is on user1.com (let it be an absolute path), or put a configuration with the nginx host but I don't don't know which one.
Thanks you for your help
I have a site built with Next.js, but not hosted on Vercel, and it has a URL ... let's say www.example.com. Before I deploy, I build the site and stage it on staging.example.com.
Previously I would just use images with a src of /foo.jpg, and they would figure out their domain based on where they were. However, the Next Image component won't let me have such src URLs. Instead, I need to define either an absolute image URL (eg. www.example.com/foo.jpg), or I need to define a loader which generates such URLs.
I figured "I'll just use an environmental variable to tell Next that I'm in staging mode" ... but that doesn't work, with either the loader or the src attribute :(
Next does generate the correct URLs when I build (I can see as much with console.log) ... but then the environmental variable is gone at runtime, and so it remakes the src attribute with www.example.com and not staging.example.com.
So, my question seems like it should be very simple, and yet I'm stuck: How can I use one base URL for my images when I build for staging, and a different base URL for when I build for production?
I'm looking to build a static Next.js Single Page App that has dynamic routes, for example: /posts/123. I'd like to do this to:
Be able to host the site anywhere (e.g. S3)
Not need to know the routes at build time (so our APIs can change whenever independently of the Frontend/without requiring a rebuild of the Frontend)
From what I can tell, this should work with:
next build && next export
fallback: true
But the docs suggest that's only for loading/intermediate states.
Can I use some combination of fallback pages/catchall dynamic routes/static generation to get a static single-page app with dynamic routes at runtime? I'm okay with faking the routes using nginx (e.g. /posts/123 -> /index.html).
Edit: the above paragraph doesn't seem possible. From the docs, when using a required catchall route, e.g. [...post].js):
fallback: true is not supported when using next export.
We created a landing page in Webflow and exported the code. We now have a HTML, CSS, JS and images from this export.
Our app is built with Next JS and hosted on Vercel. I would like to serve the static site above from certain routes like /, /pricing, /about, etc. and our own app on others.
We've looked at custom server on Next JS but that's not compatible with Vercel. Also looked into Rewrites but that has lower priority than static pages, so won't work.
We used to have a Node app and could just direct certain routes to serve static HTML and other routes would point to our React app. Not sure how to do this in Next JS. I'm hoping to have a similar setup with Next JS, but can't seem to figure it out after a lot of searching.
What is the best way to host our static Webflow site at the root and certain other paths in a Next JS app?
Figured out how to do this with Rewrites.
Export your landing page from Webflow or any other landing page builder. Put it in the /public folder of your Next JS project. Rename the index.html of your landing page to something else like landing.html. Rename pages/index.js.
The order of execution in Next JS for choosing what to display is:
File in public folder
File in pages/
Rewrites
So we removed index.html and public/index.js so that our rewrite can handle it.
Add the following rewrite to your next.config.js
{
source: "/",
destination: "/landing.html"
}
I've got some software out in the wild that needs to download some static file from a specific place on my domain: domain.net/somefolder/setup.exe. While I plan to change this, it's going to take a long time due to constraints out of my control.
In the meantime, how can I deal with this in my Angular2 router? Essentially, if Angular sees this specific url it should not try to resolve the url and instead serve the static file similar to how it would behave if you accessed static files from the assets folder.
{ path: 'somefolder/setup.exe', ... }
I ended up just doing a url rewrite on the web server level within a config.