i have deployed code on production for next js build, i have used this command
next export -o outDir
and uploaded my build code to production, i can see only home page is working, when i tried /login it gives me 404 error, can anyone please help me how to resolve this issue ? here i have also attached code for my next.config.js
module.exports = {
exportPathMap: async function (
defaultPathMap,
{ dev, dir, outDir, distDir, buildId }
) {
return {
'/': { page: '/' },
'/login': { page: '/login' },
'/chat': { page: '/chat' },
}
},
}
I think you should go to /login.html instead of /login.
Related
I ran into a weird issue with my recent Nextjs build that I cannot figure out. Any page other than the index.js page throws an error saying that Fast Refresh had to perform a full reload whenever I make a change to the page.
Nextjs version: 12.2.3
React version: 17.0.2
The error in the terminal (no console errors):
Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/basic-features/fast-refresh#how-it-works
Error: Aborted because ./pages/contact.js is not accepted
Update propagation: ./pages/contact.js -> ./node_modules/next/dist/build/webpack/loaders/next-client-pages-loader.js?absolutePagePath=D%3A%5Csites%5Coverpeaks%5Coverpeaks-nextjs%5Cpages%5Ccontact.js&page=%2Fcontact!
at applyHandler (http://localhost:3000/_next/static/chunks/webpack.js?ts=1669755499923:869:31)
at http://localhost:3000/_next/static/chunks/webpack.js?ts=1669755499923:552:21
at Array.map (<anonymous>)
contact.js:
const contact = () => {
return <div>contact</div>;
};
export default contact;
next.config.js:
/**
* #type {import('next').NextConfig}
*/
module.exports = {
experimental: {
images: {
allowFutureImage: true,
},
},
images: {
domains: ["cms.overpeaks.ca"],
},
webpack: (config) => {
config.resolve = {
...config.resolve,
fallback: {
fs: false,
path: false,
os: false,
},
};
return config;
},
};
What my structure looks like:
image
I noticed this while working on my about.js page, so I thought it might have to do with the code within there, so I created a brand new page (contact.js) and am having the same issue. I've tried removing everything within next.config.js with no difference. At this point I'm starting to think there's a bug within Nextjs causing this.
I have the following structure to use one domain to multiple projects:
A repo that contains a single vercel.json file to configure path to others projects
A repo that contains a home app example
A repo that contains a checkout app example
The vercel.json works pretty great and is deployed in nizen.com.br, here is how is it:
// vercel.json
{
"rewrites": [
{
"source": "/checkout",
"destination": "https://checkout.nizen.com.br/checkout"
},
{
"source": "/",
"destination": "https://home.nizen.com.br"
}
]
}
So if we go to nizen.com.br we get the home app example without styles and a bunch of errors in console trying to get the assets of home.nizen.com.br in nizen.com.br and the same happens to checkout app.
Here is one of the similar errors that appear in console on Home app:
And here is the checkout app:
About the app next.config.js files, only Home app stays untouched and Checkout app has a basePath added with value "/checkout" as follows:
// Checkout app next.config.js
module.exports = {
reactStrictMode: true,
basePath: "/checkout",
};
I have tried to use the Next rewrites in hope that will solve the problem but it didn't work.
// example of rewrite that I did
module.exports = {
async rewrites() {
return [
{
source: "/",
destination: "https://home.nizen.com.br",
},
];
},
};
I tried to pass :path* and :path in source and destination, as well use fallback and even change the destination to checkout app to see if something change and none of that worked.
If I got to https://home.nizen.com.br the app runs perfect and same to checkout. What am I doing wrong?
I have solved this question changing the strategy. Instead of using a repo with vercel.json to route the micro-frontends, I'm using the home app as the project hosted in nizen.com.br and it's next.config.js file is the one who makes the magic happen!
//Home App next.config.js file
module.exports = {
reactStrictMode: true,
async rewrites() {
return {
fallback: [
{
source: "/checkout",
destination: "https://checkout.nizen.com.br/checkout",
},
{
source: "/checkout/:path*",
destination: "https://checkout.nizen.com.br/checkout/:path*",
},
],
};
},
};
Both the source and destination must point to the same sub-path (/checkout) and both fallback blocks are necessary. I'm using Next version 12 by the time I'm writing this.
I have created two dynamic page but error displayed:
exporting a Next.js application via next export disables API routes.
This command is meant for static-only hosts, and is not necessary to
make your application static. Pages in your application without
server-side data dependencies will be automatically statically
exported by next build, including pages powered by getStaticProps.
Learn more: https://nextjs.org/docs/messages/api-routes-static-export
I followed exportPathMap method using next.config.js but could not solve. Could you please check my config code below solve this issue?
Page Root: pages/category/[list]/[id].js and pages/store/[list]/[id].js
next.config.js
module.exports = {
images: {
domains: ["dl8mjowvdz1rh.cloudfront.net", "app.ae"],
},
eslint: {
// Warning: This allows production builds to successfully complete even if
// your project has ESLint errors.
ignoreDuringBuilds: true,
},
exportPathMap: async function (
defaultPathMap,
{ dev, dir, outDir, distDir, buildId }
) {
return {
'/': { page: '/' },
'/category/:list/:id': { page: '/category/:list/:id', query: { title: 'Category Page' } },
'/store/:list/:id': { page: '/store/:list/:id', query: { title: 'Store Page' } },
}
},
};
I'm trying to create a React PWA from scratch. So far my project outputs the minified files to a dist/js folder.
In my service worker file I'm using Workbox to precache the app. This is my setting so far:
importScripts("./node_modules/workbox-sw/build/workbox-sw.js");
const staticAssets = [
"./",
"./images/favicon.png",
]
workbox.precaching.precacheAndRoute(staticAssets);
Currently if I enable offline from dev tools > Service Workers, it throws these errors and the app fails to load:
3localhost/:18 GET http://localhost:8080/js/app.min.js net::ERR_INTERNET_DISCONNECTED
localhost/:1 GET http://localhost:8080/manifest.json net::ERR_INTERNET_DISCONNECTED
3:8080/manifest.json:1 GET http://localhost:8080/manifest.json net::ERR_INTERNET_DISCONNECTED
logger.mjs:44 workbox Precaching 0 files. 2 files are already cached.
5:8080/manifest.json:1 GET http://localhost:8080/manifest.json net::ERR_INTERNET_DISCONNECTED
How can I fix this?
this means your resources are not getting cached properly,
you need to add them to cache before accessing,
workbox by default do it for you.
it shows 2 files cached, as they present in your array, expected result
same do it for all remaining too.
const staticAssets = [
"./",
"./images/favicon.png",
"./js/app.min.js",
"./manifest.json",
{ url: '/index.html', revision: '383676' }
]
you can try to add eventlistener,
self.addEventListener('install', event => {
console.log('Attempting to install service worker and cache static assets');
event.waitUntil(
caches.open("staticCacheName")
.then(cache => {
return cache.addAll(staticAssets);
})
);
});
self.addEventListener('fetch', function(event) {
event.respondWith(caches.match(event.request)
.then(function(response) {
if (response) {
return response;
}
return fetch(event.request);
})
);
});
I set html5mode(true) in my app.js. My code is as follows
$routeProvider.when( '/hello/there', {
templateUrl: 'partials/hello.html',
controller : 'HelloCtrl'
} );
// if none of the above routes are met, use this fallback
// which executes the 'AppCtrl' controller (controllers.js)
$routeProvider.otherwise( {
redirectTo: '/'
} );
$locationProvider.html5Mode(true);
But when I browse http://localhost:3000/hello/there
It is thowing 404 error by Loopback raiseUrlNotFoundError. When I set html5Mode(false) all works fine
How to make it work then with html5Mode true?
Thanks in advance
If you did that in server.js or in server/boot it won't work
because this will be served before the static middlware then all your static files(js, css, imgs) will go through this middlware first casuing you lots of error
the solution is to add a new middlware function in server/middlware/serveindex.js
module.exports = serveindex;
function serveindex(){
return function(req, res){
res.sendFile("index.html", {root: __dirname+"/../../client"})
}
}
Then in the middlware.json call this middlware after the static files like this
"files": {
"loopback#static": {
"params": "$!../client"
}
},
"files:after": {
"./middleware/serveindex":{
"enabled": true
}
},
You need to redirect all routes on the server side:
In server.js:
...
// -- Mount static files here--
// All static middleware should be registered at the end, as all requests
// passing the static middleware are hitting the file system
// Example:
app.use(loopback.static(path.resolve(__dirname, '../client'))); //mount static files first
...
app.all("/*", ...) //then redirect all routes
...