@neat-preset/runtime v0.4.6

neat-presets

My highly opinionated batteries included plugin-bundle for nextjs applications

• Babel presets for next @neat-preset/babel/next and node @neat-preset/babel/node
• Production ready next configuration at @neat-preset/next which is including next-env, next-images and next-fonts
• 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

yarn add @neat-preset/next yarn add --dev @neat-preset/next-dev @neat-preset/babel

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 (use this in nextjs serverless mode!)

Ignore .env.local files in your .gitignore

.env.local
.env.*.local

What other env files can i use?.

Babel for Nextjs Clients

{
  "presets": [
    ["@neat-preset/babel/next", {
      "preset-env": {},
      "transform-runtime": {},
      "module-resolver": {},
      "styled-jsx": {},
      "class-properties": {}
      "optional-chaining": {}
      "styled-components": {}
    }]
  ],
  "plugins": []
}

Babel for Node

{
  "presets": [
    ["@neat-preset/babel/node", {
      "preset-env": {},
      "transform-runtime": {},
      "module-resolver": {},
      "class-properties": {}
    }]
  ],
  "plugins": []
}

next.config.js

With images from a different host and inlined images by size limit:

module.exports = require('@neat-preset/next-dev')({
    images: {
        assetPrefix: 'https://images.example.com',
        inlineImageLimit: 16384, // default is 8192
    },
})({
    target: 'serverless',
})

With fonts from a different remote or include SVG fonts:

module.exports = require('@neat-preset/next-dev')({
    fonts: {
        assetPrefix: 'https://fonts.example.com',
        enableSvg: true,
    },
})({
    target: 'serverless',
})

With Custom env variable prefixes:

module.exports = require('@neat-preset/next-dev')({
    env: {
        staticPrefix: 'NEXT_APP_STATIC_',
        publicPrefix: 'NEXT_APP_PUBLIC_',
    },
})({
    target: 'serverless',
})

List node_modules/ that should be transpiled before being included by webpack

module.exports = require('@neat-preset/next-dev')({
    transpileModules: ['somemodule', 'and-another'],
})({
    target: 'serverless',
})

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-typescript
• next-images
• next-fonts
• next-env
• next-transpile-modules

• dotenv-load

• @babel/preset-env

• babel-plugin-macros
• @babel/register
• @babel/cli
• @babel/core
• @babel/runtime
• and more......