1.7.2 • Published 6 years ago

uber-next v1.7.2

Weekly downloads
2
License
MIT
Repository
github
Last release
6 years ago

uber-next

npm version npm downloads

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