Next.js Template

To setup a new project based on this template, just run:

npx degit StudioNAND/next-template your_project_name

• Project structure
• Getting started
  • Environment variables
• ESlint and Prettier
• Material-UI and JSS

---

Project structure

• src/server/index: the custom next.js server
• src/pages: All main entry points of the application
• src/components: All components that define the application
• src/utils: All utility functions
• src/stores: All stores that hold the state of the application
• src/.env: Default environment variables (read more)

Getting started

You must create a .npmrc file to access the @studionand github registry.

old format node <= 14

registry=https://npm.pkg.github.com/studionand
//npm.pkg.github.com/:_authToken=YOUR_TOKEN

new format node > 14

@studionand:registry=https://npm.pkg.github.com/studionand
//npm.pkg.github.com/:_authToken=YOUR_TOKEN

how to create github token

• npm start: start application in development mode
• npm run dist: build production app
• npm run serve: serve production app

By default the server will start on 0.0.0.0:80. PORT and HOSTNAME are defined as default environment variables.

Environment variables

Next.js now comes with its own solution for environment variables: see here

ESLint and Prettier

This project uses ESLint. We are using the @studionand/eslint-config which is configured with eslint-plugin-prettier in order to run checks for prettier-formatting via eslint. You can find the prettier configuration as prettier.config.js file inside the @studionand/eslint-config module.

Using eslint-plugin-prettier over prettier CLI has the advantage that errors are properly printed to the console. When running npm run eslint:fix it will also fix all prettier formatting rules.

• npm run eslint for running eslint
• npm run eslint:fix for running eslint and fix if possible

Note: It is possible that we still have conflicting rules between the eslint and prettier, because we are not using eslint-config-prettier yet. Please open an issue if you experience any problems with the linting configuration.