ethanneff/template-next

A template repo with NextJS, Typescript, Redux, Eslint, Github Actions, and Github Pages.

Template Web

A template repo with NextJS, Typescript, Redux, Eslint, Github Actions, and Github Pages.

https://ethanneff.github.io/template-next/

users	posts	comments

Install

git clone https://ethanneff.github.io/template-next/
cd template-next
yarn install

Development Local

yarn dev

yarn lint

yarn test

• Local development is done at localhost:3333

Development Local Prod

yarn build

yarn start

• Local development production is done at localhost:3333/template-next

Contributing

• Code validation happens automatically through Git hooks an CI.
• Validate your commit with commitlint guidelines as this determines the semver of the release.

Deploying

• Deploying happens automatically after merging your code to the main branch.
• View the production website at github pages
• View the bundled package at github packages

File Structure

.
├── .github
│   ├── workflow      // remote ci scripts
│   ├── CHANGELOG.md  // change log
│   ├── *.config.json // development configs
├── .husky            // local ci scripts
├── .vscode           // IDE configs
├── out               // production build
├── public            // public assets
│   └── images        // optimized images
└── src               // javascript code
    ├── components    // ui components
    ├── modules       // screens
    ├── pages         // routing (each file is a new route)
    ├── redux         // clint-side event cache
    ├── styles        // css
    ├── testing       // testing functions for mocks, factories, setup
    └── utils         // global utility/helper functions
├── README.md         //
├── *.config.json     // development configs

Tooling

tool	usage	example
next	react framework for client and server rendering	yarn dev yarn start yarn build
jest	react testing framework	yarn test yarn watch
eslint	code linting	yarn lint
prettier	code formatter	yarn prettify
typescript	code type safety	yarn lint
commitlint	commit prefix validator
normalize.css	standardize css across browsers
semantic release	automatic deploys and version control	yarn semantic-release
github actions	pull request ci
redux-toolkit	cache client state	const globalState = { themeMode, sidebarStatus }
swr	query and cache server state	const { data, error } = useSWR('/api/user', fetcher)

Routing

• http://localhost:3333/
• http://localhost:3333/users
• http://localhost:3333/users/1
• http://localhost:3333/users/1/posts
• http://localhost:3333/users/1/posts/1
• http://localhost:3333/users/1/comments
• http://localhost:3333/users/1/comments/1
• http://localhost:3333/posts
• http://localhost:3333/posts/1
• http://localhost:3333/comments
• http://localhost:3333/comments/1

TODO

• fav icon

• users

• posts

• comments

• lint

• jest

• semantic release

• github package

• github actions

• github pages

• type isPost better

• directory guide

• image hosting

• codecov

• header

• footer

• styling

• fix loading issue

• redux

• 80% jest

• sample PR

• lighthouse

Additional Resources

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