The purpose of this repo is to accelerate startup time when creating a new NextJs app.

• Getting Started
• Directory Structure
• Features
• Libraries
• Scripts
• IDE Configurations
• Committing Changes

First, install npm packages

npm install

Then, run the development server:

npm run dev

Open http://localhost:3000 with your browser to start.

📦 src
┣ 📂 __tests__               # tests for pages
┃ ┗ 📜 index.test.tsx
┣ 📂 components              # components used within the app
┃ ┗ 📜 Posts.tsx
┣ 📂 context                 # application context providers 
┃ ┗ 📜 AppState.tsx
┣ 📂 core                    # non-feature related core services
┃ ┣ 📂 mocks
┃ ┃ ┣ 📂 seed
┃ ┃ ┃ ┣ 📜 seedPosts.js
┃ ┃ ┃ ┗ 📜 seedStyleMedia.js
┃ ┃ ┣ 📜 mswHandlers.js
┃ ┃ ┗ 📜 mswServer.js
┃ ┗ 📜 test.utils.tsx
┣ 📂 hooks                   # hooks used within the app
┃ ┣ 📂 __tests__
┃ ┃ ┗ 📜 usePosts.test.ts
┃ ┗ 📜 usePosts.ts
┣ 📂 pages                   # pages directory - drives navigation
┃ ┣ 📂 api
┃ ┃ ┗ 📜 posts.ts
┃ ┣ 📜 _app.tsx
┃ ┗ 📜 index.tsx
┗ 📂 services                # feature-related services
┃ ┣ 📂 __tests__
┃ ┃ ┗ 📜 postsService.test.ts
┃ ┗ 📜 postsService.ts

The setup and configuration includes a number of opinionated best-practices in attempt to keep the code clean, safe, and free of bugs.

Code is formatted and linted with each save, if configured, or at least before each commit with the help of husky.

Tests are configured for both unit and integration tests. Unit tests are performed with jest where msw helps avoid mocking http requests, both server and client, which allows for easier integration tests.

npm run test    # runs all tests, creating test report

npm run test:open    # opens the test report

npm run test:cover    # runs all tests, creating coverage report

npm run test:cover:open    # opens the coverage report

npm run lint    # runs lint check, produces report

npm run lint:fix    # runs lint and fixes, produces report

npm run prepare   # installs husky hook - this lints the app before each commit

npm run format   # run code format check

npm run format:fix   # run fix code formatting

npm run pre-commit   # this is ran prior to a git commit - runs lint and checks branch name

The .vscode directory is checked into this repo and serves to share common settings and defaults.

Recommended Extensions are configured, be sure to install.

// entering: desc
describe('', () => {
  
});

// entering: it
it('should ', () => {
  // arrange
  // act

  // assert
});

// entering: ita
it('should ', async () => {
  // arrange
  // act
  
  // assert
});

// entering: func
export default function () {

}

// entering: hook
export default function use() {

}

The .idea directory is checked into this repo and serves to share common run configurations

Husky makes git hooks sharable within a project while also ensuring code conventions are enforced. The hook is installed during npm install and should require no further setup.

Husky pre-commit is configured to run the npm task pre-commit which does the following:

• Avoid commits to master/main
• Format staged code
• Lint staged code

Should the need arise to ignore the hook, manually commit using --no-verify

# Example
git commit -m "commit message" --no-verify