next-but-one v0.5.0
next-but-one
My highly opinionated plugin-bundle for nextjs applications
- Drop-in replacement for
next/babel
- Ships babel presets for server & client.
- Adds dotenv loading behaviour similar to create-react-app
- Adds webpack file-loader for images and fonts using
next-images
&next-fonts
- Adds dev-expression
__DEV__ = process.env.NODE_ENV !== 'production'
- Must have babel plugins and export syntax extension
- Includes my favorite babel plugins like
babel-plugin-macros
and export-syntax extensions See list below
Usage
Create a next.config.js
// next.config.js
const withNextButOne = require('next-but-one')
module.exports = withNextButOne()
Create a .babelrc
for your next app
{
"presets": [
"next-but-one/babel"
]
}
...and a .babelrc
for your server app
{
"presets": [
"next-but-one/babel-server"
]
}
Create a .env
NEXT_SERVER_TEST_1=ONLY_ON_SSR
NEXT_PUBLIC_TEST_1=INJECTED_BY_SSR
NEXT_STATIC_TEST_1=STATIC_TEXT
Ignore .env.local files in your .gitignore
.env.local
.env.*.local
What other env files can i use?.
Advanced
Optionally you can pass custom plugin configuration in your next.config.js
and .babelrc
.
Browser .babelrc
.
{
"presets": [
["next-but-one/babel", {
"preset-env": {},
"transform-runtime": {},
"module-resolver": {},
"styled-jsx": {},
"class-properties": {}
}]
],
"plugins": []
}
Server .babelrc
.
{
"presets": [
["next-but-one/babel", {
"preset-env": {},
"transform-runtime": {},
"module-resolver": {},
"class-properties": {}
}]
],
"plugins": []
}
next.config.js
With CSS modules and options:
// next.config.js
const withNextButOne = require('next-but-one')
module.exports = withNextButOne({
css: {
cssModules: true,
cssLoaderOptions: {
importLoaders: 1,
localIdentName: "[local]___[hash:base64:5]",
}
}
})
With images from a different remote or inlined images with size limit:
module.exports = withNextButOne({
fonts: {
assetPrefix: 'https://example.com',
inlineImageLimit: 16384, // default is 8192
}
})
With fonts from a different remote or include SVG fonts:
module.exports = withNextButOne({
fonts: {
assetPrefix: 'https://example.com',
enableSvg: true,
}
})
With Custom env variable prefixes:
module.exports = withNextButOne({
env: {
staticPrefix: 'CUSTOM_STATIC_',
publicPrefix: 'CUSTOM_PUBLIC_',
}
})
License
Licensed under the MIT License, Copyright © 2019-present Richard Keil
See LICENSE for more information.
Acknowledgements
This project is standing on the shoulders of giants as it is build on top of earlier open-source work by clever folks all around the world.
Please check them out:
Included Libraries
- @zeit/next-css
- next-images
- next-fonts
- next-env
- babel-plugin-module-resolver
- @babel/plugin-proposal-export-default-from
- @babel/plugin-proposal-export-namespace-from
- @babel/plugin-proposal-optional-catch-binding
- @babel/plugin-proposal-throw-expressions
- @babel/plugin-syntax-dynamic-import
- @babel/plugin-transform-destructuring
- @babel/plugin-transform-runtime
- @babel/runtime-corejs2
- @babel/plugin-transform-spread
- @babel/preset-env
- @babel/register
- @babel/cli
- @babel/core