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.js
const withNextButOne = require('next-but-one')
module.exports = withNextButOne()

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.

Browser .babelrc.

{
  "presets": [
    ["next-but-one/babel", {
      "preset-env": {},
      "transform-runtime": {},
      "module-resolver": {},
      "styled-jsx": {},
      "class-properties": {}
    }]
  ],
  "plugins": []
}

Server .babelrc.

{
  "presets": [
    ["next-but-one/babel", {
      "preset-env": {},
      "transform-runtime": {},
      "module-resolver": {},
      "class-properties": {}
    }]
  ],
  "plugins": []
}

next.config.js

With CSS modules and options:

// next.config.js
const withNextButOne = require('next-but-one')
module.exports = withNextButOne({
    css: {
        cssModules: true,
        cssLoaderOptions: {
            importLoaders: 1,
            localIdentName: "[local]___[hash:base64:5]",
        }
    }
})

With images from a different remote or inlined images with size limit:

module.exports = withNextButOne({
    fonts: {
        assetPrefix: 'https://example.com',
        inlineImageLimit: 16384, // default is 8192
    }
})

With fonts from a different remote or include SVG fonts:

module.exports = withNextButOne({
    fonts: {
        assetPrefix: 'https://example.com',
        enableSvg: true,
    }
})

With Custom env variable prefixes:

module.exports = withNextButOne({
    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-proposal-export-default-from

• @babel/plugin-proposal-export-namespace-from

• @babel/plugin-proposal-optional-catch-binding

• @babel/plugin-proposal-throw-expressions

• @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