uber-next v1.7.2
uber-next
My highly opinionated batteries included plugin-bundle for nextjs applications
- Drop-in replacement for
next/babel
- Ships babel presets for the client
uber-next/babel
and serveruber-next/babel-server
- Production ready next configuration including
next-images
,next-fonts
andnext-env
- Adds dotenv loading behaviour similar to
create-react-app
- Adds global dev-expression (compiling
__DEV__
totrue
orfalse
based on yourNODE_ENV
passed tonext build
) - Includes my favorite babel plugins like
babel-plugin-macros
and export-syntax extensions See list below
Usage
// next.config.js
module.exports = require('uber-next')()()
Create a .babelrc
for your next app
{
"presets": [
"uber-next/babel"
]
}
...and a .babelrc
for your server app
{
"presets": [
"uber-next/babel-server"
]
}
Create a .env
NEXT_SERVER_TEST_1=ONLY_ON_SSR
NEXT_PUBLIC_TEST_1=INJECTED_BY_SSR // available/exposed in the browser
NEXT_STATIC_TEST_1=STATIC_TEXT // embedded in the js bundles on build time
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": [
["uber-next/babel", {
"preset-env": {},
"transform-runtime": {},
"module-resolver": {},
"styled-jsx": {},
"class-properties": {}
"optional-chaining": {}
"styled-components": {}
}]
],
"plugins": []
}
Server .babelrc
.
{
"presets": [
["uber-next/babel", {
"preset-env": {},
"transform-runtime": {},
"module-resolver": {},
"class-properties": {}
}]
],
"plugins": []
}
next.config.js
With CSS modules and options:
// next.config.js
const withUberNext = require('uber-next')({
css: {
cssModules: true,
cssLoaderOptions: {
importLoaders: 1,
localIdentName: "[local]___[hash:base64:5]",
}
}
})
module.exports = require('uber-next')({
target: 'serverless'
})
With images from a different remote or inlined images with size limit:
module.exports = require('uber-next')({
fonts: {
assetPrefix: 'https://example.com',
inlineImageLimit: 16384, // default is 8192
}
})()
With fonts from a different remote or include SVG fonts:
module.exports = require('uber-next')({
fonts: {
assetPrefix: 'https://example.com',
enableSvg: true,
}
})()
With Custom env variable prefixes:
module.exports = require('uber-next')({
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-jsx-control-statements
- @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-proposal-optional-chaining
- @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