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.jsconst withNextButOne = moduleexports =
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
.
.babelrc
.
Browser "presets": "next-but-one/babel" "preset-env": {} "transform-runtime": {} "module-resolver": {} "styled-jsx": {} "class-properties": {} "plugins":
.babelrc
.
Server "presets": "next-but-one/babel" "preset-env": {} "transform-runtime": {} "module-resolver": {} "class-properties": {} "plugins":
next.config.js
With CSS modules and options:
// next.config.jsconst withNextButOne = moduleexports =
With images from a different remote or inlined images with size limit:
moduleexports =
With fonts from a different remote or include SVG fonts:
moduleexports =
With Custom env variable prefixes:
moduleexports =
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: