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' } },
}
},
};
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.
In a Gatsby project hosted in Gatsby Cloud I'm passing an API key as an environment variables, but unfortunately it's not available...
The code looks like this:
import React, { useEffect, useState } from 'react';
import Airtable from 'airtable';
Airtable.configure({ apiKey: process.env.AIRTABLE_API_KEY });
const base = Airtable.base('appKjIv7utFmqAkdT');
function Gallery() {...
You can see where I'm inserting the API key.
My gatsby-config.js looks like this (I'm loading dotenv on top):
require('dotenv').config({
path: `.env.${process.env.NODE_ENV}`,
});
module.exports = {
siteMetadata: {
title: `wernergeller.com`,
siteUrl: `https://www.yourdomain.tld`,
},
plugins: [
{
resolve: 'gatsby-plugin-google-analytics',
options: {
trackingId: '123',
},
},
'gatsby-plugin-image',
'gatsby-plugin-sitemap',
'gatsby-plugin-sharp',
'gatsby-transformer-sharp',
{
resolve: 'gatsby-source-filesystem',
options: {
name: 'images',
path: './src/images/',
},
__key: 'images',
},
],
};
Locally (gatsby develop) this is working well.
Any help is highly appreciated!
In Gatsby Cloud variables needs to be added in the dashboard. The URL is something like: https://www.gatsbyjs.com/dashboard/YOUR_ORGANIZATION_UUID/settings/general#env-vars
And visually:
You can add variables individually or in a bulk with key:value pair:
Keep in mind that if you have environment variables that need to be accessed in the browser rather than the server, you'll need to prefix with GATSBY_.
It looks that the Airtable configuration is set on the browser, so you will need to change the key to:
Airtable.configure({ apiKey: process.env.GATSBY_AIRTABLE_API_KEY });
Changing the environment variable accordingly in the process.env and in the Gatsby Cloud dashboard.
Test your site with gatsby build locally before pushing it because gatsby develop it's not a full representation of your built/compiled project.
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 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.
I am trying to plug nextjs with keystone js show that i can use reactjs for frontend and keystonejs as CMS but It's not working. I was following a tutorial to do so although it worked in tutorial but i don't know why its not working in my case.
tutorial website
This is how i tried to configure.
keystone.js
// Simulate config options from your production environment by
// customising the .env file in your project's root folder.
require('dotenv').config();
// Require keystone
const keystone = require('keystone');
//var handlebars = require('express-handlebars');
//Next app
const next = require('next');
const dev = process.env.NODE_ENV !== 'production';
const app = next({dev});
// Initialise Keystone with your project's configuration.
// See http://keystonejs.com/guide/config for available options
// and documentation.
keystone.init({
'name': 'cmsblog',
'brand': 'cmsblog',
// 'sass': 'public',
// 'static': 'public',
// 'favicon': 'public/favicon.ico',
// 'views': 'templates/views',
// 'view engine': '.hbs',
// 'custom engine': handlebars.create({
// layoutsDir: 'templates/views/layouts',
// partialsDir: 'templates/views/partials',
// defaultLayout: 'default',
// helpers: new require('./templates/views/helpers')(),
// extname: '.hbs',
// }).engine,
'auto update': true,
'session': true,
'auth': true,
'user model': 'User',
});
//Load your project's Models
keystone.import('models');
// Setup common locals for your templates. The following are required for the
// bundled templates and layouts. Any runtime locals (that should be set uniquely
// for each request) should be added to ./routes/middleware.js
app.prepare()
.then(() => {
// keystone.set('locals', {
// _: require('lodash'),
// env: keystone.get('env'),
// utils: keystone.utils,
// editable: keystone.content.editable,
// });
// Load your project's Routes
keystone.set('routes', require('./routes'));
// Configure the navigation bar in Keystone's Admin UI
keystone.set('nav', {
posts: ['posts', 'post-categories'],
galleries: 'galleries',
enquiries: 'enquiries',
users: 'users',
});
// Start Keystone to connect to your database and initialise the web server
keystone.start();
})
Routes.js
const keystone = require('keystone');
exports = module.exports = nextApp => keystoneApp => {
//setup Route Bindings
const handle = nextApp.getRequestHandler();
keystoneApp.get('/api/posts', (req,res,next) => {
const Post = keystone.list('Post');
Post.model
.find()
.where('state', 'published')
.sort('-publishedDate')
.exec(function(err, results) {
if(err) throw err;
res.json(results);
});
});
keystone.get('*', (req,res) => {
return handle(req,res);
});
};
folder structure
result after visiting localhost:3000
https://medium.com/#victor36max/how-to-build-a-react-driven-blog-with-next-js-and-keystonejs-cae3cd9fb804
The tutorial website says
A Next.js 404 page should show up instead of KeystoneJS page.
Let’s try to make a page with Next.js.
In pages folder, make a new file index.js .
So you can keep it up.