This plugin adds Next.js to your application.
Recommended
gasket create <app-name> --plugins @gasket/plugin-nextjs
npm i @gasket/plugin-nextjs next react react-dom
Modify plugins
section of your gasket.config.js
:
module.exports = {
plugins: {
add: [
+ '@gasket/plugin-nextjs'
]
}
}
- Instead of adding a dedicated
next.config.js
, thenext
property withingasket.config.js
is used. Everything you can configure in the next.config can be added here.
It is also possible for apps to config Next.js using the gasket.config.js
file. To do so, specify a nextConfig
object property in the same form as what
you would set for custom configurations or using Next.js plugins.
For general Webpack configurations, it is recommend to utilize features of the Gasket webpack plugin.
module.exports = {
plugins: {
add: ['@gasket/nextjs']
},
nextConfig: {
poweredByHeader: false,
useFileSystemPublicRoutes: false,
generateBuildId: () => Date.now()
}
}
const withSass = require('@zeit/next-sass');
const withCss = require('@zeit/next-css');
module.exports = {
plugins: {
add: ['nextjs']
},
nextConfig: withCss(withSass({
/* config options here */
}))
}
Executed when the next
server has been created. It will receive a reference to
the created next
instance.
module.exports = {
hooks: {
/**
* Modify the Next app instance
* @param {Gasket} gasket The Gasket API
* @param {Next} next Next app instance
*/
next: function next(gasket, next) {
next.setAssetPrefix('https://my.cdn.com/dir/');
}
}
}
Executed before the next
server has been created. It will receive a reference
to the next
config. This will allow you to modify the next
config before the
next
server is created.
module.exports = {
hooks: {
/**
* Modify the Next config
* @param {Gasket} gasket The Gasket API
* @param {Object} config Next config
* @returns {Object} config
*/
nextConfig(gasket, config) {
return {
...config,
modification: 'newValue'
};
}
}
}
Provides access to both next
and express
instances which allows
next.render
calls in express-based routes.
module.exports = {
hooks: {
nextExpress: function (gasket, { next, express }) {
express.post('/contact-form', (req, res) => {
// DO STUFF WITH RECEIVED DATA
//
// And once we're done, we can `next.render` to render the `pages/thanks`
// file as a response.
next.render(req, res, '/thanks', req.params);
});
}
}
}