Meson enhance Jamstack
Jamstack is an architectural approach that decouples the web experience layer from data and business logic, improving flexibility, scalability, performance, and maintainability.
Next.js
To set up a CDN, you can set up an asset prefix and configure your CDN's origin to resolve to the domain that Next.js is hosted on.
Open next.config.js
and add the assetPrefix
config:
const isProd = process.env.NODE_ENV === 'production'
module.exports = {
// Use the CDN in production and localhost for development.
assetPrefix: isProd ? 'https://pz-xxxxxx.meson.network' : '',
}
Next.js will automatically use your asset prefix for the JavaScript and CSS files it loads from the /_next/
path (.next/static/
folder).
CDN Support with Asset Prefix - Next.js Docs
Gatsby
Adding to gatsby-config.js
module.exports = {
assetPrefix: `https://pz-xxxxxx.meson.network`,
}
One more step - when you build out this application, you need to add a flag so that Gatsby picks up this option.
Enable prefixing for builds
You must explicitly enable prefixing for a build by either adding the --prefix-paths
flag or setting the PREFIX_PATHS
environment variable. If this flag or env variable is not specified, the build will ignore this option, and build out content as if it was hosted on the same domain. To ensure you build out successfully, do one of the following:
gatsby build --prefix-paths
PREFIX_PATHS=true gatsby build
Adding an Asset Prefix - Gatsby Docs
Webpack
output: {
publicPath: "https://pz-xxxxxx.meson.network/[fullhash]/",
},