A skeleton/boilerplate/starter project for quickly building web applications using NextJs as full-stack.
By running one command, you will get a production-ready Next.js app installed and configured on your machine. There are many built-in features in the skeleton, including authentication using next-auth, request validation, unit and integration tests, continuous integration, docker support, API documentation, folderstructure, Mongodb with TypeOrm etc. To learn more about its features, check out the following list.
- Next framework TypeScript starter repository.
-Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.
- Next. js solves both of those problems using server-side rendering. Next's framework allows you to build scalable, performant React code without the configuration hassle.It has many great features and advantages, which can make Nextjs your first option for building your next web application
Take it for a test drive. We'd love to hear any feedback you have or if you've thought of a new feature.
- Features
- Getting started
- Project Structure
- Documentation
- Miscellaneous
- Trainings
- Video Tutorials
- Contributing To This Project
- Issues and Discussions
- Stay in touch
- Quick start
- Integrated ESLint, Prettier and Husky
- Simple and Standard scaffolding
- Production-Ready Skeleton
- Followed SOLID Principles
- Authentication: for both server/client using next-auth
- Image Optimization: using next/images
- Server Side Rendering
- PerPage Layout
- TypeOrm with Mongodb: storing data in backend
- Common Error Handler
- Auth Guard
- Localization
- SEO stratergy
- Next generation Sass
- Form Validation Using Regex
- Testing: unit and integration tests using Jest
- Environment variables: segregated env files for easier variable management.
- CI: Continuous integration
- Docker support
- Git hooks: with husky
- Linting: with ESLint and Prettier
- Node https://nodejs.org/en/ use the LTS version
- NPM
- Docker https://www.docker.com/
- Install Docker Desktop for MAC: https://docs.docker.com/docker-for-mac/install/
- Install Docker Desktop for Windows: https://docs.docker.com/docker-for-windows/install/
- Docker Compose
- NestJS CLI https://nestjs.com/
To get started, clone the repository to your local computer. Use the following command to run in your terminal.
// clone the application
$ git clone https://github.com/NeoSOFT-Technologies/rest-node-nextjsNext, install the packages that are required for this project.
// Install the required npm modules
$ npm installThe env file should be placed in root folder with the following variables.
.env: Default Environment File.env.test: Test Environment File.env.production: Production Environment File.env.staging: Staging Environment File
# .env example
ENV_VARIABLE="server_only_variable"
NEXT_PUBLIC_ENV_VARIABLE="public_variable"
# development
$ npm run start
# watch mode
$ npm run dev:dev
# production mode
$ npm run dev:prodFor this project, We chose Jest as our test framework. While Mocha is probably more common, Mocha seems to be looking for a new maintainer and setting up TypeScript testing in Jest is wicked simple.
# unit tests
$ npm run test
# e2e tests
$ npm run test:e2e
# test coverage
$ npm run test:covAll the different build steps are orchestrated via npm scripts.
Npm scripts basically allow us to call (and chain) terminal commands via npm.
This is nice because most JavaScript tools have easy to use command line utilities allowing us to not need grunt or gulp to manage our builds.
If you open package.json, you will see a scripts section with all the different scripts you can call.
To call a script, simply run npm run <script-name> from the command line.
You'll notice that npm scripts can call each other which makes it easy to compose complex builds out of simple individual build scripts.
Below is a list of all the scripts this template has available:
| Npm Script | Description |
|---|---|
start |
Start project in development mode |
start:prod |
this script runs project in production mode |
build |
Full build. Runs ALL build tasks |
clean |
On Run clean the installed node packages |
clean:cdn |
On Run clean css from build |
build:prod |
Runs build and build:css together |
test |
Runs tests using Jest test runner |
eject |
Runs react-scripts eject |
format |
Runs prettier roles on project files |
test:coverage |
Gives the code coverage infrom to table |
lint |
Runs ESLint on project files |
lint:fix |
Runs lint and fix the resolve able errors |
lint:quiet |
Run lint to show errors only |
prepare |
install husky |
precommit |
Runs lint:fix and format before commit |
prepush |
Runs lint before push |
In a TypeScript project, it's best to have separate source and distributable files.
TypeScript (.ts) files live in your client folder and after compilation are output as JavaScript (.js) in the dist folder.
The test and views folders remain top level as expected.
Please find below a detailed description of the app's folder structures:
Note! Make sure you have already built the app using
npm run build
| Name | Description |
|---|---|
| wiki/ | You can add project documentation and insructions file here |
| src | Contains your source code that will be compiled to the build dir |
| src/client/ | contains the source code of frontend |
| src/client/components/ | UI Components and reuseable components |
| src/client/resources/ | Constant Variables such as images and strings |
| src/client/store/ | Contains slice and hooks |
| src/client/store/${page-name}/slice.ts | Contains slice configuration {state, action and reducers} |
| src/client/store/index.ts | Entry point for store configuration |
| src/client/styles/ | SASS styles |
| src/client/types/ | Schema or Types |
| src/client/utils/ | Reusable utlity like api http client |
| src/client/index.ts | Entry point to your frontend app |
| src/pages/ | We can provide the frontend routes ,dynamic routes |
| src/pages/api/ | we can provide the backend routes |
| src/server | contains the source code of backend |
| src/server/configs/ | connects the server with database |
| src/server/controllers/ | controllers belongs to that server |
| src/server/entities/ | contains the schema,validations |
| src/server/services/ | contains the logic and provide access to repo |
| src/server/utils/ | connects repo with database |
| package.json | File that contains npm dependencies |
| tsconfig.json | Config settings for compiling server code written in TypeScript |
| next.config.js | config settings for compiling option |
| next-env.d.ts | file ensures Next.js types are picked up by the TypeScript compiler |
| .eslintrc.json | Config settings for ESLint code style checking |
| .eslintignore | Config settings for paths to exclude from linting |
| prettierrc.json | Config settings for Prettier code format checking |
| .prettierignore | Config settings for paths to exclude from formatting |
| .vscode | Contains VS Code specific settings |
| .github | Contains GitHub settings and configurations, including the GitHub Actions workflows |
| .husky | Contains Husky settings and configurations |
| build | Contains the distributable (or output) from your TypeScript build. This is the code you ship |
| node_modules | Contains all your npm dependencies |
An explanation of how the request and response cycle works is provided here
When there is s request from frontend routes ,here is the response flow.
This flow start works in server, whenever there is a request from the client.
Contributions are welcome from anyone and everyone. We encourage you to review the guiding principles for contributing
- Website - https://www.neosofttech.com/
- Twitter - @neosofttech
- Meetup - https://www.meetup.com/neosoft-technologies/
- Medium - https://medium.com/@neosofttech-technologies-blog
- GitHub - https://github.com/NeoSOFT-Technologies
- Discord - NodeJS