Package - 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

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.

uber-next

Usage

Advanced

Browser `.babelrc`.

Server `.babelrc`.

`next.config.js`

License

Acknowledgements

Included Libraries

Current Tags

14 Versions

uber-next

Usage

Advanced

Browser .babelrc.

Server .babelrc.

next.config.js

License

Acknowledgements

Included Libraries

Current Tags

14 Versions

Browser `.babelrc`.

Server `.babelrc`.

`next.config.js`