This project is based on an official Next.js project bootstrapped with create-next-app. I add some libraries and pre-configred that will help to start the project with Next.js.

Any contribution to improve , fixing mistakes or add some new features for this project are welcome.

Included

• Next.js 12 (Document).
• React 18 (Document).
• Easy to scaffolding new files via CLI by using compose command (plopjs)
• TailwindCSS 3(Document).
• Docker-compose pre-configured (Document).
• Jest (Document).
• Testing library (Document) with react (Document) and jsdom (Document)extended.
• Preconfigured linting with ESLint.
• Proconfigured editor settings for vscode.
• Written in Typescipt.

Getting Started

First, install the dependencies,

npm install
# or
yarn

and then run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

Components

You can get faster in create new component files by typing

npm run compose
# or
yarn compose

it's will automatically create thease files:

• components/NewComponent/NewComponent.tsx
• components/NewComponent/NewComponent.test.tex

Pages

You can start editing the page by modifying files in /pages like pages/index.tsx. The page auto-updates as you edit the file. if you create a new *.ts or *.tsx files in /pages Next.js will handle routing automatically (See more).

APIs

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.ts.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

Testing

We'll use Jest and Testing Library for doing some unit tets. I wrote 2 difference configs for Jest to seperate front-end and back-end tests.

frontend test

for front-end we'll set the name of test file with normal Jest test file naming pattern like *.test.tsx or *.spec.tsx.

As we know that by default Next.js threat all files with .js, .jsx, .ts, .tsx that placed in /pages directory as a page, So to prevent Nextjs from processing our test files I decide to write tests for files in /pages to <rootDir>/__test__ instead to keep file structure in /pages clean, easy to read and also prevent an error while building the project.

and here's how to perform front-end test:

npm run test
# or
yarn test

note: if you want to place test files alongside the files in /pages you need to change default setting in next.config.js follow this document.

backend test

for back-end code we'll add .server to the name of testing file like *.server.test.ts or *.server.spec.ts this will use node as testing environment instead of jsdom that used for front-end testing.

npm run test:server
# or
yarn test:server

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deployment

Docker Compose

I created some configs for developing and production build use Docker compose.

you can create and run Docker containers by

npm run docker-dev:up
# or
yarn docker-dev:up

or this, for production.

npm run docker-prod:up
# or
yarn docker-prod:up

I write 3 seperates docker-compose file.

• docker-compose.yml main docker-compose settings you can customize as you want.
• docker-compose.dev.yml docker-compose setting for development purpose.
• docker-compose.prod.yml docker-compose setting for production.

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.