@neat-preset/babel NPM

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 CSS modules and options:

// next.config.js
const withNeat = require('@neat-preset/next-dev')({
    css: {
        cssModules: true,
        cssLoaderOptions: {
            importLoaders: 1,
            localIdentName: '[local]___[hash:base64:5]',
        },
    },
})

module.exports = withNeat({
    target: 'serverless',
})

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

module.exports = require('@neat-preset/next-dev')({
    fonts: {
        assetPrefix: 'https://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://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',
})