✔️ Typescript implementation.
✔️ Pre-configured Github Actions for CI.
✔️ Redux + Redux + Redux Saga implementation.
✔️ Emotion implementation.
✔️ Eslint JS/JSX files.
✔️ Stylelint SCSS files.
✔️ Runs Eslint, Jest, and Stylelint before committing.
✔️ Pre-configured Cypress for E2E testing.
✔️ Pre-configured interactive API.
Click to expand project structure
├── .github
├── .next
├── api
| ├── controllers
| ├── database
| ├── middlewares
| ├── models
| ├── routes
| ├── test
| ├── .eslintignore
| ├── .eslintrc
| ├── jest.json
| ├── nodemon.json
| ├── prod-paths.json
| ├── server.ts
| ├── tsconfig.json
| └── tsconfig.prod.json
|
├── build
├── database
├── e2e
├── logger
├── models
├── public
├── src
| ├── actions
| ├── components
| ├── constants
| ├── pages
| ├── reducers
| ├── sagas
| ├── store
| ├── styles
| └── global.d.ts
|
├── .browserslistrc
├── .eslintignore
├── .eslintrc
├── .gitignore
├── .npmrc
├── .prettierc
├── .stylelintrc
├── babel.config.js
├── jest.json
├── next.env.d.ts
├── next.config.json
└── tsconfig.json
1 - Clone the repository.
git clone [email protected]:mattcarlotta/nextjs-ssr-kit.git
2 - Run yarn install
to install dependencies.
3 - Run yarn dev
to run a development server.
Provided in this boilerplate is an example of how to integrate a RESTful API utilizing MongoDB.
In order to interact with the API, you'll need to:
- Install MongoDB and make sure the service is up and running.
- While the development server is running, open your browser and navigate to http://localhost:3000/users.
yarn <command> |
Description |
---|---|
analyze |
Compiles src app to .next/static and displays chunk distribution charts for production. |
build |
Compiles src app to .next/static and api to dist for production. † |
build:staging |
Compiles src app to .next/static and api to dist for staging. |
dev |
Starts development servers (localhost:3000 for app and localhost:5000 for api). |
lint |
Lints all .ts /.tsx files in src . |
lint:api |
Lints all .ts files in api . |
start |
Starts production servers (must run build first). |
start:staging |
Starts staging servers (must run build:staging first). |
test |
Runs .test.tsx files in src once. |
test:api |
Runs .spec.ts files in api once. |
test:apicov |
Runs .spec.ts files in api with code coverage. |
test:apiwatch |
Runs and watches all .spec.ts files in api for changes. |
test:cov |
Runs .test.tsx files in src with code coverage. |
test:e2e |
Runs cypress .spec.js files in e2e in a browser (run build:staging /start:staging first). |
test:e2erun |
Runs cypress .spec.js files in e2e headlessly. |
test:watch |
Runs and watches .tsx files in src that have changed since last commit. |
test:watchall |
Runs and watches all .test.jsx files in src for changes. |
† Note: Before running this command, you must edit the .env.prod file and update the baseURL
from http://localhost:5000/api/
to include your remote API server host and update CLIENT
from http://localhost:3000
to include your remote server application host.
Click to expand NextJS configuration
- .next: NextJS development/production compiled source.
- public: NextJS public assets.
- src/actions: Redux actions.
- src/components: React components.
- src/constants: Redux constants.
- src/pages/_app.tsx: NextJS app configuration (redux + redux saga + global stylesheet).
- src/pages/_document.tsx: NextJS document configuration for emotion components.
- src/pages/_error.tsx: NextJS fallback 404 page.
- src/reducers: Redux reducers.
- src/sagas: Redux sagas.
- src/store: Redux store configuration.
- src/styles: Custom component/page styles.
- src/types: Shareable typescript types and interfaces.
- src/utils/__mocks__/mockAxios.ts: A mocked axios instance for testing.
- src/utils/setupTest/index.ts: Enzyme test setup for your React components.
- src/utils/axiosConfig/index.ts: Custom axios configuration.
- src/utils/parseFields/index.ts: Custom functions for parsing form fields into a simple object.
- src/utils/parseResponse/index.ts: Custom functions for parsing 'res' responses.
- src/global.d.ts: typescript types for jest globals.
- .eslintignore: NextJS eslint config for NextJS.
- .eslintrc: NextJS eslint ignore config for NextJS.
- .stylelintrc: Stylelint config for NextJS.
- babel.config.js: Babel config for NextJS.
- jest.json: jest Config for NextJS.
- next.env.d.ts: Types for NextJS.
- next.config.js: Custom NextJS webpack config.
- tsconfig.json: TS compiler options for Next (integration with IDE)
Click to expand API configuration
- api/controllers: Express route controllers.
- api/database: Mongo connection configuration.
- api/middlewares: Express middlewares.
- api/models: Mongoose models for Mongo.
- api/routes: Express routes.
- api/test/utils: Test setup utils.
- api/.eslintignore: API eslint config.
- api/.eslintrc: API eslint ignore config.
- api/jest.json: jest config for API.
- api/nodemon.json: Development options for reloading the API process on save.
- api/prod-path.js: Resolving aliased modules for API in production.
- api/server.ts: Express server setup.
- api/tsconfig.json: TS compiler options for the API (integration with IDE)
- api/tsconfig.prod.json: TS compiler options for building the API (excludes tests)
- build: API compiled source.
Click to expand misc configurations
- .github: Continous integration using Github Actions and repo issue templates.
- e2e: Cypress end-to-end test suites.
- logger: Shareable chalk console notifications.
- .browserslistrc: Browsers list config (for babel transpiling).
- .prettierc: Prettier config.
- .npmrc: Yarn config.
Click here to see latest versions.
Click to expand brief overview of NextJS packages
- Axios
- Babel
- Cypress
- Emotion
- Enzyme
- Eslint
- Husky
- Jest
- NextJS
- NextJS Redux Wrapper
- Prettier
- React
- React Toastify
- Redux
- Redux DevTools Extension
- Redux Saga
- Sass
- Snackables
- Stylelint
- Stylelint-SCSS
- Stylelint-Config-Recommended
Click to expand brief overview of API packages
- Bluebird
- Body Parser
- CORS
- Express
- Mongoose
- Morgan
- Prettier
- Snackables
By default, most directories within the root and src
directories are aliased (~
). This means that you can refer to root files or directories by using the ~
symbol followed by a child file or directory name (root-level index.js
files require their own aliases, as such this project has been set up to handle predefined directories -- you'll be responsible for any additional directories). For example, ~middlewares
refers to the api/middlewares/index.ts file, while ~models/users
refers to the api/model/user.ts file. This allows for rapid development when referring to root-level directories as it eliminates the hassle of specifiying relative paths (like ../../../../../../../models
) to the directory!
By default, this project attempts to import .env
files placed within the root
directory according to the process.env.ENV_LOAD
variable (dev
, staging
, prod
, test
, ...etc; see snackables documentation for more info). However, this has been set up to be flexible so that if you don't wish to utilize any .env
files, then as long the following process.env
variables are defined, then the .env
files and/or directory can be discarded:
APIPORT
(required and used here)baseURL
(required and used here)CLIENT
(required and used here, here and here)DATABASE
(required and used here)PORT
(required and used here)
If you run into any issues, please fill out an issue report here.
react
and react-dom
to 16.x.x and revert back to enzyme-react-adapter-16
in the setupTests file.
Support this boilerplate by becoming a contributor. Your github logo will show up here with a link to your profile.