I'm unsuccessfully attempting to create a simple NextJS site that has a /app prefix on all the links. So that on the home page (which has a link to /about), the About link should end up as /app/about.
(updated based on comments below) My next.config.js file looks like this:
module.exports = {
assetPrefix: "/app",
publicRuntimeConfig: {
basePath: "/app",
},
basePath: "/app",
};
And my package.json's scripts section has:
"build": "next build && next export",
However, when I copy the contents of the generated out folder into my web server, the index page's "About" link always points to /about without the desired prefix. What could be causing that? It appears as though the assetPrefix value is working:
So it's just the root basePath field that isn't working.
This issue has been reported as fixed recently. https://github.com/vercel/next.js/pull/9872
Try to use the most recent canary release. At this moment it's 9.5.2-canary.18
Related
I’m building a website with Next.js and I need to add a page called "Index" under xyz.com/index
It works fine locally but when I deploy the website to vercel, /index shows the home page which is located under xyz.com/
Is there a way to make this work through rewrites or configuration on vercel?
Would you try to create a folder named Index, then under Index folder create js file called index.js.
You can see this image--
As of now (next 12.0.3) the solution that works for me is using a rewrite:
Name the page something like "indexPage":
/pages/indexPage.js
Rewrite /index to /indexPage:
In next.config.js:
module.exports = {
// …
async rewrites() {
return [
{
source: '/index',
destination: '/indexPage',
},
]
},
// …
}
Using the following folder structure only worked locally for me but not when deployed to vercel:
/pages/index/index.js
I'm building Next.js app, my main page is 'hybrid' amp page
export const config = { amp: 'hybrid' };
export default function Home({ data }) {...}
export async function getStaticProps() {
return {
props: { data: {...} },
revalidate: 6000,
};
}
I'm deploying to serverless using npx serverless
When deployed the /index.html home page has in its <head> the reference to the amp version of the page, which is /index.amp
<link rel="amphtml" href="/index.amp">
When I got to the amp page /index.amp I got 404 page
Any one know what's the problem please
"next": "11.0.0",
"react": "17.0.2",
"react-dom": "17.0.2",
Instead of directly accessing /index.amp, add ?amp=1 to the end of the URL you want to load the AMP version of the page.
Ref- https://nextjs.org/docs/api-reference/next/amp
Edit:
Ref- I am not aware of any AMP logic as of now, so it should be unsupported.
After lots of debugging, I found that AMP is not supported for the hybrid approach in serverless-next, although it working fine AMP-only configuration export const config = { amp: true }. That's the reason why it's working on localhost but not on deploy.
You can achieve this behaviour using nextjs server-side redirects.
It's not officially supported as of version #19.0.0.
My serverless.yml file
myApp:
component: '#sls-next/serverless-component#1.19.0'
Edit 2:
Finally it's working when I don't specify version.
My changed serverless.yml file
myApp:
component: '#sls-next/serverless-component'
My working deployed serverless amp version url is here
Note- If you do not specify the version, it will use the latest tag, which refers to the latest stable version here (i.e not alpha versions).
I am new to Next.js, I built a simple landing page and wanted to generate a static page using npm run build which I set in package.json to "build": "next build && next export".
But I get this Error:
Error: Image Optimization using Next.js' default loader is not compatible with `next export`.
Possible solutions:
- Use `next start` to run a server, which includes the Image Optimization API.
- Use any provider which supports Image Optimization (like Vercel).
- Configure a third-party loader in `next.config.js`.
- Use the `loader` prop for `next/image`.
Can someone help me, I read the documentation and I created next.config.js in the root and pasted this:
module.exports = {
images: {
loader: 'imgix',
path: '/images/',
},
}
I think that I need a path, but the thing is I am not using hosted images, I have an images folder in the the public folder.
I know this is probably a stupid question, but I'm stuck.
I hosted them on https://imgbb.com and wrote this in next.config.js
module.exports = {
images: {
domains: ['i.ibb.co'],
},
}
and it worked.
Usage:
<Image src="https://i.ibb.co/TMBV2KP/Akwagroup.jpg"
alt="ESMASA TRAVAUX"
width={1050}
height={500}
/>
So i have this mountains.jpg which is in the root folder of the project that i want to load in the background.
My container has style={{ backgroundImage: `url(${path.resolve("mountains.jpg")})` }}
I have also a console.log(path.resolve("mountains.jpg")) which prints this on Linux:
/home/user/Documents/App/dist/linux-unpacked/mountain.jpg
and the image loads fine!
But then i install it on Windows and run the app.
The path printed is C:\Users\user\AppData\Local\Programs\app\mountains.jpg which i checked and the image was in the right place.
But then i get this error:
Failed to load resource: net::ERR_FILE_NOT_FOUND
file:///C:/UsersuserppDataLocalProgramsppmountains.jpg
which is very odd. The path seems all messed up when it is parsed by url(path)
If anyone knows a fix for this, i would be thankful to know.
My image is in the project root folder and my component in src/Component.js. I used a relative path from my component to the image, and the image could load fine.
So the problem was that after i used electron-builder, and ran the app in dist folder, the relative path was no longer valid, because the component now supposedly was one level deeper, as the console.log(path) showed me.
package.json build
"build": {
"appId": "com.app",
"files": [
"build/**/**/*",
"node_modules/**/*",
"./main.js"
],
"extraFiles": [
{
"from": ".",
"to": ".",
"filter": [
"*.jpg",
"*.png"
]
}
],
So i was telling electron-builder to target the image files in root and copy them over to the dist folder, but the relative path to the image changes. So i used full path using process.cwd() so in both cases it starts in root project folder then points to image from there.
But as the windows path gets bugged, i tried a different approach, which was removing the "extraFiles:" part from package.json, and then adding a file-loader module to Webpack.
Then, as suggested by other people, i added import image from '../mountains.jpg'
and then
<Component style={{ backgroundImage: `url(${image})` }}></Component>
And now it works on Windows too :)
The image won't be in the root folder tho, so to have the image shipped with the app and be available on the root folder, the extraFiles can still be used so the image gets copied over.
I am building a project that utilises ServerMiddleware to render some pages client side only (I can't find another way of getting this working well without ServerMiddleware. Problems on refreshing pages and so on...)
The problem: Unfortunately every time I try and deploy to my Firebase Function through 'firebase deploy' I get an error:
Error: Cannot find module '~/serverMiddleware/selectiveSSR.js'
The function builds OK if I exclude the following line. Nuxt/ Vue is not including ~/serverMiddleware/ as part of its build as far as I can see.
Here is the code in nuxt.config.js to reference my serverMiddleware:
serverMiddleware: ['~/serverMiddleware/selectiveSSR.js']
Adding either the directory or path (as above) to the file itself within Build in nuxt.config.js does not help either. Maybe I am doing it wrong?
Everything works perfectly when testing (Not building) locally.
Any ideas on how I can resolve this please?
Thanks!
Ok so for anyone else who hits this, here is how I got around it.
Firstly, I don't know if this is the fault of Firebase Hosting or Nuxt (I would guess Nuxt but I stand to be corrected), but here is what to do....
1) Remove any reference to ServerMiddleware from nuxt.config.js
2) Add the following to nuxt.config.js
modules: [
'~/local-modules/your-module-name'
],
3) Create directory ~/local-modules/your-module-name in your project root
4) In the new directory, create a package.json:
{
"name": "your-module-name",
"version": "1.0.0"
}
and index.js - key thing, this.addServerMiddleware allows you to call middleware server-side
module.exports = function(moduleOptions) {
this.addServerMiddleware('~/serverMiddleware/')
}
5) Create directory ~/serverMiddleware
6) Add your middleware function to index.js in the new directory:
export default function(req, res, next) {
// YOUR CODE
next() // Always end with next()!
}
7) Update package.json with your new local module under "dependencies":
"your-module-name": "file:./local-modules/your-module-name"
Don't forget you need to do this within the functions directory too or Firebase will complain it can't find your new module