README.md

next-query-boilerplate

---

Next.js Boilerplate

Libraries

This boilerplate uses the following libraries and tools:

Core

• TypeScript
• Next.js
• React-Query

Utilities

• TypeStyle makes css typesafe.

Developer Experience

• ESLint for linting.

Testing

• Jest as test runner.
• TS Jest as Jest preprocessor
• Enzyme for rendering React Components.
• Jest Enzyme for asserting React Components.

Doc

• Storybook - UI component dev & test: React and more.

ToDos

• i18n
• Sentry
• Analytics
• Typestyle / styled-component
• Docker
• Github actions

Directory Structure

.
├── build                       # Built, ready to serve app.
├── config                      # Root folder for configurations.
│   └── main.local.js           # Local App configurations.
├── node_modules                # Node Packages.
├── public                      # Root folder public files like favicon.
│   └── favico.ico              # Fav Icon
├── src                         # Source code.
│   ├── components              # Unconnected Components.
│   ├── styles                  # Style for the Components.
│   └── pages                   # Page Components which will also be route.
├── translations                # For json translations.
├── .dockerignore               # Tells docker which files to ignore.
├── .gitignore                  # Tells git which files to ignore.
├── Dockerfile                  # Dockerfile.
├── LICENSE                     # License file
├── package.json                # Package configuration.
├── yarn.lock                   # Package lock
├── README.md                   # This file
├── styleguide.config.js        # Config for doc
└── tsconfig.json               # TypeScript transpiler configuration.

Installation

You can clone from this repository and use master

$ git clone https://github.com/madame-organic/next-query-boilerplate
$ cd next-query-boilerplate
$ yarn install

Or you can use this template to create your project by clicking here.

Usage

All commands defaults to development environment. You can set NODE_ENV to production or use the shortcuts below.

# Running

$ yarn dev # This starts the app in development mode

# Starting it with the production build (todo)
$ NODE_ENV=production npm start # or
$ yarn start

# Building (todo)
$ yarn build # This builds the app in development mode

# Commands below builds the production build (todo)
$ NODE_ENV=production yarn build # or
$ yarn build:prod

# Testing (todo)
$ yarn test

# Too see doc, run this command, and go to localhost:6060. Any component that has .md file with the same name will be
# doc-generated. (todo)
$ yarn doc

For Windows users, we recommend using the shortcuts instead of setting environment variables because they work a little different on Windows.

License

This boilerplate is released under the MIT license.

---

Madame Organic

Madame Organic manufactures beauty products like soap, makeup, etc.

You can contact us at [email protected]