uber-next

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 server uber-next/babel-server
• Production ready next configuration including next-images, next-fonts and next-env
• Adds dotenv loading behaviour similar to create-react-app
• Adds global dev-expression (compiling __DEV__ to true or false based on your NODE_ENV passed to next 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

• dotenv-load

• babel-plugin-macros

• 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