Template for your Next.js project

Made with developer experience first: Next.js, TypeScript, ESLint, Prettier, Husky, Lint-Staged.

---

^{Daniel Bannert's open source work is supported by the community on GitHub Sponsors}

---

Developer experience first:

• 🔥 Next.js for Static Site Generator
• 🎉 Type checking TypeScript
• ✅ Strict Mode for TypeScript and React 17
• ✏️ Linter with ESLint (default Anolilab configuration)
• 🛠 Code Formatter with Prettier (default Anolilab configuration)
• 🦊 Husky for Git Hooks
• 🚫 Lint-staged for running linters on Git staged files
• 🤖 SEO metadata, JSON-LD and Open Graph tags with Next SEO
• ⚙️ Bundler Analyzer
• 🖱️ One click deployment with Vercel or Netlify (or manual deployment to any hosting services)
• 🌈 Include a FREE minimalist theme
• 💯 Maximize lighthouse score
• Rosetta I18n

Built-in feature from Next.js:

• ☕ Minify HTML & CSS
• 💨 Live reload
• ✅ Cache busting

🏁 Getting Started

To get started, simply use this repository as GitHub template, click the Use this template button or clone the repository and run yarn

Do this only if you clone this repository

# Clone the repo
git clone https://github.com/anolilab/next.js-template.git

# Move into the new directory
cd next.js-template/

# Use nvm (https://github.com/nvm-sh/nvm)
nvm use (if you missing the node version use "nvm install")

# Install npm packages
yarn

# Start up the next.js dev server, browse to http://localhost:3000/
yarn run dev

Features

This template is prepared to add linaria

yarn add @linaria/core @linaria/react @linaria/babel-preset @linaria/shaker

everything else is preconfigured for you.

Images with Next/Images 🚀

• Feature and inline images
• Auto-optimized images
• No content shifts due to consistent placeholders

Advanced Routing

• Auto-detects custom paths
• Configurable collections

Developer friendly

• MIT licenced
• Truly open-source
• Easy to contribute
• Made typesafe with TypeScript

NextJS Features

• Incremental Regeneration
• Support for Preview

NextJS image optimizations

You must add all domains that you use for in-sourcing images in the anolilab.config.cjs file, for example:

module.exports = {
    // ...
    images: {
        domains: ["images.unsplash.com", "static.gotsby.org"],
    },
    // ...
};

Note that image optimization does not work with Netlify. Therefore, image optimization is automatically turned off when deploying to Netlify.

CLI Commands

• yarn: Installs dependencies
• yarn run dev: Run a development, HMR server
• yarn run start: Run a production-like server
• yarn run build: Production-ready build
• yarn run lint: Pass TypeScript files using eslint
• yarn run lint:css: Pass TypeScript files using eslint
• yarn run lint: Pass TypeScript files using eslint
• yarn run test: Run Jest and Enzyme

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!

Disclaimer

This project is not affiliated with NextJS.

Copyright & License

Copyright (c) 2020 - 2021 anolilab - Released under the MIT license.