Managed configuration for Next.js project.

Developing production-level projects requires a variety of tools and settings.
For example, eslint, prettier, .gitignore, polyfill and etc,.

Next Pack is a package created to centralize and manage additional parts when creating or maintaining Next.js based project.

Check the Next.js version to use before installation.
You must specify the version for your Next.js version.
First install Next.js and React package. see Manual Setup for Next.js

npm install next react react-dom

or

yarn add next react react-dom

Warning: For new projects, run git init first.
Since we use git hooks, the .git folder must exist.

Install next-pack of the same major version as Next.js.

npm install @repacks/next-pack

or

yarn add @repacks/next-pack

It is the same as How to use Next.js.
add a scripts to your package.json like this:

{
  "scripts": {
    "start": "next-pack start",
    "dev": "next-pack",
    "build": "next-pack build",
    "lint": "next-pack lint"
  }
}

The same cli commands provided by Next.js are provided.

If you need a custom server and need to run it through the server.js file to use an express server, write the following:

const express = require('express');
const next = require('@repacks/next-pack');

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });

It is designed to use @repacks/next-pack instead of next.

For custom advanced behavior of next-pack, You can use .nextpackrc.cjs in the configuration file.
Take a look at the following .nextpackrc.cjs example:

const path = require('path');
module.exports = {
  workspaceRoot: path.resolve(__dirname), // or './', '../..'
  eslint: {
    disable: false,
    files: [],
    chunkSize: 500,
    restartable: 'rs',
    exit: ['warning', 'error'],
  },
};

workspaceRoot {String} (optional): default workspace's root folder

You can set the workspace's root folder path.
Each configuration file is created in the folder set as the workspace root.
If not set, the project's root folder is the workspace's root folder.

• eslint {Object} (optional): default {}
• eslint.disable {Boolean} (optional): default false
  turn on/off eslint background watcher.
• eslint.files {Array} (optional): default ['src', 'pages', 'components', 'server']
  Configuration by using the glob pattern for the files being watched. (eg. ["./src/**/*.ts", "./src/**/*.tsx"])
• eslint.chunkSize {number} (optional): default 500
  The number of files to be processed at a time.
• eslint.restartable {string|Boolean} (optional): default rs
  next-pack does not display duplicate eslint errors in the same file even if the file is changed.
  Whilst fixing eslint errors, if you need to print out the entire eslint error, instead of stopping and restart next-pack, you can type rs with a carriage return, and eslint will restart your process.
  (inspired by nodemon)
• eslint.exit {['warning', 'error']} (optional): default []
  This setting is used when using the next-pack lint of scripts.
  It is used when you want to exit with failure for git hooks.
  Write the error level at which you want the failure to occur.

When running next-pack, the local development and production environment does the following:

• Run eslint in watch mode on the terminal
• Additional polyfills (support IE9)
• Manage settings by copying configuration files from next-pack, next-pack/root folder to project folder
  • .editorconfig
  • .eslintrc.js
  • .gitattributes
  • .prettierrc.js
• .gitignore settings updated with next-pack version
  Custom settings can be added
• Run prettier when git commit via husky, lint-stated (required manully install)

If you want to use additional polyfills for modern browsers, load polyfills-module.js in pages/_app.js as follows.

import '@repacks/next-pack/src/client/polyfills-module';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

If you want to use additional polyfills for legacy browsers(IE), add addPolyfillPlugins in next.config.js as follows.

const {
  addPolyfillPlugins,
} = require('@repacks/next-pack/src/plugins/add-polyfills-nomodule');

module.exports = {
  webpack(config, { dev, isServer }) {
    return {
      ...config,
      plugins: [
        ...(config.plugins || []),
        ...addPolyfillPlugins({
          // filePaths key is optional. If set or not set, it will be added to the `polyfills-nomodule.js` of next-pack.
          // You can add your custom additional polyfills for legacy browsers.
          // eg - filePaths: ['./src/client/polyfills-sample.js', 'html5shiv']
          filePaths: [],
          dev,
          isServer,
        }),
      ].filter(Boolean),
    };
  },
};

If you want to use eslint, install eslint-config-next and configure it as follows.

yarn add --dev eslint eslint-config-next

.eslintrc.js

const config = require('@repacks/next-pack/config/eslint');

module.exports = {
  ...config,
  extends: ['next'],
  rules: {
    ...config.rules,
    // add custom rules
  },
};

If you want to use prettier, install the following packages.

yarn add --dev prettier lint-staged

The import sort setting is automatically added if you use the @trivago/prettier-plugin-sort-imports package, which is a prettier plugin.

yarn add --dev @trivago/prettier-plugin-sort-imports

After installing referring to Husky install, set as follows in .husky/pre-commit.

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx lint-staged # or yarn lint-staged

I'd love to have your helping hand on next-pack.
please read CONTRIBUTING.md.