✔️ 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.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent