Menu
I am working on a NextJS project where we are planning to do static HTML export of pages as described here.
Here, Is the scenario I want to have worked:
Say we have already statically generated the following pages.
about/product1
about/product2
about/product3
During the course of the day, the availability of product1 has changed. Is there a way to only do a static export of about/product1 without touching the other pages which have been previously exported.
584
asked Nov 15 '19 06:11
Next. js also became one of the most popular Static Site Generators. In other words, it's one of the best frameworks now for building superfast and SEO-friendly Jamstack websites.
Unlike Create React App, popular React frameworks like Gatsby and Next. js have first-class, built-in static site generation support for React applications.
next export allows you to export your Next. js application to static HTML, which can be run standalone without the need of a Node. js server. It is recommended to only use next export if you don't need any of the unsupported features requiring a server.
In Next.js, a page is a React Component exported from a .js, .jsx, .ts, or .tsx file in the pages directory. Each page is associated with a route based on its file name. Example: If you create pages/about.js that exports a React component like below, it will be accessible at /about. Next.js supports pages with dynamic routes.
It is recommended to only use next export if you don't need any of the unsupported features requiring a server. If you're looking to build a hybrid site where only some pages are prerendered to static HTML, Next.js already does that automatically. Learn more about Automatic Static Optimization and Incremental Static Regeneration.
This happens if you're using the internationalized routing feature and are trying to generate a static HTML export by executing next export. Well, this features requires a Node.js server, or dynamic logic that cannot be computed during the build process, that's why it is unsupported. This is the case if you're using next-i18next for example.
Update your build script in package.json to use next export: Running npm run build will generate an out directory. next export builds an HTML version of your app. During next build, getStaticProps and getStaticPaths will generate an HTML file for each page in your pages directory (or more for dynamic routes ).
Based on your example, you should follow these steps:
Create a configuration file to set up a custom exportMap:
// next.config.js
module.exports = {
exportPathMap: async function(
defaultPathMap,
{ dev, dir, outDir, distDir, buildId }
) {
return {
// only include the pages that you want to export
'about/product1': { page: 'about/product1' },
}
},
}
Build and export making sure to set a different output folder. For instance, if your build and export script is called bexport and you want to name your new export folder as "out2" you would use:
yarn bexport -o out2
Warning: if you don't specify a different output folder, only about/product1 will be reexported to the original output folder, but about/product2 and about/product3 would be erased because they're not included in the current exportMap setup.
Move the reexported file to the folder that contains all the exported pages to overwrite the previous version of about/product1:
mv out2/about/product1.html out/about/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
