π¦ΈββοΈ A super template for Next.js with a pack of incredible tools
MIT License
Deploy your own copy of this template in just a few clicks!
This is a complete template with all you need for your next React projects and all the best practices of JAMStack.
This template have a bunch of folders, code examples and configurations. Feel free to edit or remove them, including this README!
Customize and enjoy!
This project features all the latest tools and good practices in web development!
$ git clone https://github.com/<YOUR-GITHUB-LOGIN>/<NAME-OF-YOUR-GENERATED-REPOSITORY>.git
Before you can start developing your super application, you need to install the project's dependencies.
Move yourself to the root of the project:
$ cd <NAME-OF-YOUR-GENERATED-REPOSITORY>
For the next steps, choose a package manager of your choice and change the commands contained in the
package.json
scripts. See their documentation for more information:
Install all dependencies of the project:
# PNPM
$ pnpm install
# NPM
$ npm install
# Yarn
$ yarn install
Once all dependencies have been installed, you can run the local development server:
# PNPM
$ pnpm run dev
# NPM
$ npm run dev
# Yarn
$ yarn dev
Now just code!
After applying the changes, you can generate a build to test and/or deploy to your production environment.
Make a production build:
# PNPM
$ pnpm run build
# NPM
$ npm run build
# Yarn
$ yarn build
And then run the build:
# PNPM
$ pnpm start
# NPM
$ npm start
# Yarn
$ yarn start
# PNPM
$ pnpm run lint
# NPM
$ npm run lint
# Yarn
$ yarn lint
# PNPM
$ pnpm run lint:fix
# NPM
$ npm run lint:fix
# Yarn
$ yarn lint:fix
# PNPM
$ pnpm run test # or pnpm run test:watch
# NPM
$ npm run test # or npm run test:watch
# Yarn
$ yarn test # or yarn test:watch
# PNPM
$ pnpm run type-check
# NPM
$ npm run type-check
# Yarn
$ yarn type-check
# PNPM
$ pnpm run format
# NPM
$ npm run format
# Yarn
$ yarn format
# PNPM
$ pnpm run up
# NPM
$ npm run up
# Yarn
$ yarn up
# PNPM
$ pnpm run up-latest
# NPM
$ npm run up-latest
# Yarn
$ yarn up-latest
# PNPM
$ pnpm run release-as-major
# NPM
$ npm run release-as-major
# Yarn
$ yarn release-as-major
# PNPM
$ pnpm run release-as-minor
# NPM
$ npm run release-as-minor
# Yarn
$ yarn release-as-minor
# PNPM
$ pnpm run release-as-patch
# NPM
$ npm run release-as-patch
# Yarn
$ yarn release-as-patch
# PNPM
$ pnpm run push-release
# NPM
$ npm run push-release
# Yarn
$ yarn push-release
# PNPM
$ pnpm run pull
# NPM
$ npm run pull
# Yarn
$ yarn pull
Install the SWR on the project:
# PNPM
$ pnpm install swr
# NPM
$ npm install swr
# Yarn
$ yarn add swr
Remove all import lines, providers and code blocks of React Query located in src/pages/_app.tsx
and src/pages/[login].tsx
.
That's it! Use the useFetch
function to fetch your data in the application.
Wanna see a demo? Uncomment all import lines and code blocks of SWR implementation on src/pages/[login].tsx
.
Put the babel.config.js
file (located in the path src/scripts
) in the project root and delete .babelrc
file.
Uncomment the wdyr
import line on pages/_app.tsx
.
That's it! Now you can monitore React re-renders!
Just delete the babel.config.js
and wdyr.ts
files, remove wdyr
import line on pages/_app.tsx
and uninstall it:
# PNPM
$ pnpm uninstall @welldone-software/why-did-you-render
# NPM
$ npm uninstall @welldone-software/why-did-you-render
# Yarn
$ yarn remove @welldone-software/why-did-you-render
See below the file tree to understand the project structure.
Folders and files marked with (
**
) are optional, so you can delete then.
π next-plate/
β£ π .github/ # GitHub's folder configs **
β£ π .husky/ # Husky's folder
β β£ π commit-msg # Commitlint git hook
β β π pre-commit # Lint-staged git hook
β£ π .vscode/ # VSCode's workspace **
β£ π public/ # Public folder
β β£ π static/ # Static files folder **
β β β£ π icons/ # Icons folder **
β β β£ π images/ # Images folder **
β β β£ π sounds/ # Sounds folder **
β β β π videos/ # Videos folder **
β β£ π docs/ # Documentation folder **
β β β£ π demo/ # Demonstrations project **
β β β π translations/ # Translations folder **
β β£ π favicon.ico # Icon tab browser
β β£ π site.webmanifest # PWA config
β£ π src/
β β£ π animations/ # Framer Motion Animations **
β β£ π components/ # App Components
β β β π Motion/ # Chakra + Framer components **
β β£ π hooks/ # React Hooks **
β β β π useFetch.ts # SWR fetch hook (optional) **
β β£ π interfaces/ # TypeScript Interfaces
β β£ π pages/ # App pages
β β£ π scripts/ # Additional scripts **
β β β£ π babel.config.js # Babel config with WDYR **
β β β π wdyr.ts # WDYR file **
β β£ π services/ # Services
β β β£ π global/
β β β β π api.ts # AXIOS config
β β β π users/
β β β£ π index.ts # React Query Configuration
β β β π keys.ts # React Query Key
β β£ π stores/ # Zustand stores
β β£ π styles/ # Styles folder
β β β£ π bgImages.ts # SVG background images **
β β β π theme.ts # Chakra-UI theme
β β π utils/ # Useful functions **
β£ π .babelrc # Default Babel config
β£ π .editorconfig # Editor config
β£ π .eslintignore # ESLint ignore
β£ π .eslintrc # ESLint config
β£ π .gitignore # Git ignore
β£ π .versionrc # Versioning config
β£ π .commitlintrc # Commitlint config
β£ π jest.config.js # Jest config
β£ π jest.setup.js # Jest setup
β£ π LICENSE # License of the project
β£ π next-env.d.ts # Next.js types to TypeScript
β£ π next-seo.config.js # Next-SEO config
β£ π next-sitemap.config.js # Next-Sitemap config
β£ π next.config.js # Next.js config
β£ π .prettierrc # Prettier config
β£ π README.md # Main README
β£ π renovate.json # Renovate Bot config **
β£ π tsconfig.json # TypeScript config
Although you don't have to, if you reuse this template for your projects I would appreciate it if you would credit me and provide a link to my GitHub profile in the footer of your project. Thanks!
This project is licensed under the MIT License - see the LICENSE page for details.