A highly opinionated and complete starter for Next.js projects ready to production

Overview

Next Starter

The aim for this starter is to give you a starting point with everything ready to work and launch to production. Web Vitals with 100% by default. Folder structure ready. Tooling ready. SEO ready. SSR ready.

image

⚡️ Stack

Available Scripts

  • yarn dev Next dev
  • yarn start: Next start
  • yarn build: Next build
  • yarn analyze: Generate bundle-analyzer
  • yarn lint: Audit code quality

🖌 Styling

Styling is done with 💅🏼 Styled Components.

Global Styles

Global styles from @/components/GlobalStyles are added in _app.tsx

There you will find 2 things.

  • An Opinionated CSS Reset.
  • Some CSS Variables for colors that will be accesible by the whole app.

Styling Performance

In order to improve performance, Styled Components are generated at build time and served with the document generated by Next's Server Side Rendering.

There is already a font preloaded from Google Fonts, Poppins. Using Google Fonts allows Next.js to CSS inline the font at build time.

All of this is happening at _document.tsx

🏁 Tooling

ESLint

ESLint extends eslint-config-airbnb, eslint-config-next, and some accesibility recomendations from eslint-plugin-jsx-a11y.

There are also some opinionated rules you can change at .eslintrc.js.

Prettier

Prettier will be managed using ESLint. For Code Styling the Prettier config at .prettierrc.js will be used.

Some popular settings are already set.

trailingComma: 'es5',
singleQuote: true,
printWidth: 80,
tabWidth: 2,
useTabs: false,
endOfLine: 'lf'

.prettierrc.js

Any ESLint config that has conflicts with be overriten and Prettier config will be used in that case.

VsCode

Some extensions are recommended from .vscode/extensions.json

Format on save is disabled so we can leverable formating to ESLint.

CSS Variables extension will check for CSS Custom Properties at GlobalStyles.tsx

"editor.formatOnSave": false,
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
},
"cssVariables.lookupFiles": [
  "**/GlobalStyles.tsx"
]

.vscode/settings.json

Absolute imports

Absolute imports working with prefix @/ starting from src folder.

"paths": {
  "@/*": ["src/*"],
}

tsconfig.json

Sorting and grouping imports

Imports will be grouped by dependencies, absolute imports (@/*) and relative imports. Also they will be sorted by insensitive ascending order.

This is done using eslint-plugin-simple-import-sort and sort-keys from .eslintrc.js

Validate staged files

On every commit, the staged files will be validated to pass ESLint config.

This is done using husky and lint-staged

  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": "eslint --cache --fix --cache-location ./node_modules/.cache/.eslintcache"
  },

package.json

Styled Components

One common feature when using Styled Components is to use babel-plugin-styled-components to improve the readability of the generated classNames, and display the fileName in the className generated.

This is done without using the plugin, by Vercel's team with the flag:

styledComponents: true

next.config.js

Using this prevents the need to create a babel.config.json, which breaks the posibility to use SWC (Rust based and more performant) compiler for Next.js.

Next.js Compiler

Other options added for the Next.js compiler includes removing console.* in production, adding concurrent features so Suspend just works, and reactStrictMode.

compiler: {
  removeConsole: true,
  styledComponents: true,
},
experimental: {
  concurrentFeatures: true,
},
reactStrictMode: true,

next.config.js

SEO

Head Component

The Head component has already some defaults, change them to fit your use case.

Then import it and use it on the root of any page you need SEO.

import { Head } from '@/components'

You can also pass props to customize the use case of different pages.

OG Image

There is an OG Image already in /public/images/og.png, change it for a OG Image that suit your use case.

It should be 1200x630px to fit most social media.

Indexing

/public/robots.txt file already provided allowing indexing.

Mantainers

You might also like...

Component-based node server architecture that is dockerized and ready for deployment

Introduction Component based node server architecture that is dockerized and ready for deployment Installation clone the repo and then cd NODE-SERVER

Jan 24, 2022

Next Boilerplate was created to be a template for starting NextJS projects with pre-configured settings like Linters, Test Setup, Storybook and Commit Hooks.

Next Boilerplate was created to be a template for starting NextJS projects with pre-configured settings like Linters, Test Setup, Storybook and Commit Hooks.

Next Boilerplate was created to be a template for starting NextJS projects with pre-configured settings like Linters, Test Setup, Storybook and Commit Hooks.

Feb 22, 2022

⚡️ Set up Next.js Progressive Web App with `npx create-next-pwa`

⚡️ Set up Next.js Progressive Web App with `npx create-next-pwa`

⚡️ create-next-pwa A cross-platform Node.js based CLI tool that creates Progressive Web App (PWA) with Next.js. You can also integrate tailwind with t

Nov 20, 2022

React + Redux starter kit / boilerplate with Babel, hot reloading, testing, linting and a working example app built in

React + Redux starter kit / boilerplate with Babel, hot reloading, testing, linting and a working example app built in

A comprehensive starter kit for rapid application development using React. Why Slingshot? One command to get started - Type npm start to start develop

Jan 3, 2023

A Gatsby starter using the latest Shopify plugin showcasing a store with product overview, individual product pages, and a cart

A Gatsby starter using the latest Shopify plugin showcasing a store with product overview, individual product pages, and a cart

Gatsby Starter Shopify Kick off your next Shopify project with this boilerplate. This starter creates a store with a custom landing page, individual f

May 12, 2021

Starter Project for Nuxt3 project with full tailwind3 implementation and also docker & docker-compose supprt

Nuxt 3 & Tailwind 3 Starter Including tailwindConfig and Tailwind Config Viewer! Be patient, this is just a Beta version of Nuxt3. For Nuxt3 Installat

Nov 10, 2022

A Remix starter with intuitive defaults, like support for internationalization and localized URLs

A Remix starter with intuitive defaults, like support for internationalization and localized URLs

💿 Remix Starter A Remix starter with intuitive defaults, like support for internationalization and localized URLs. Coming soon: Authentication and au

Jan 8, 2023

A simple Vue3, Nuxt3 and Tailwind3 Starter Template

Nuxt 3 + Tailwind CSS 3 Starter This is a minimal starter template for Nuxt 3 projects with Tailwind CSS 3. It includes a simple template pages/index.

Feb 11, 2022

A starter project to run your local server, and start sending voice packets to Deepgram

A starter project to run your local server, and start sending voice packets to Deepgram

A starter project to run your local server, and start sending voice packets to Deepgram

Sep 30, 2022
👩🏻‍💻 Developer Ready: A comprehensive template. Works out of the box for most Node.js projects.

node-typescript-boilerplate ????‍?? Developer Ready: A comprehensive template. Works out of the box for most Node.js projects. ???? Instant Value: All

IAD S.r.l. 6 Dec 15, 2022
The official, opinionated, batteries-included toolset for efficient Redux development

Redux Toolkit The official, opinionated, batteries-included toolset for efficient Redux development (Formerly known as "Redux Starter Kit") Installati

Redux 9k Jan 8, 2023
Opinionated SvelteKit Template for building web applications.

Opinionated SvelteKit Template for building web applications.

Manassarn 7 Jan 1, 2023
Hi there! This is a react native starter which used to build a awesome Event Booking App based on the Figma design. You can download or clone it to speed up your projects.

mcrn-event-booking-app-starter Hi there! This is a react native starter which used to build a awesome Event Booking App based on the Figma design. You

Roy Chen 43 Dec 19, 2022
A MERN boilerplate repository with RBAC feature, following all production best practices.

Welcome to the RBAC MERN Boilerplate project A MERN boilerplate repository with RBAC feature, following all production best practices. In this reposit

Foyzul Karim 268 Dec 27, 2022
🚀 A well-structured boilerplate and Starter for Next.js 12+, Tailwind CSS 3, Redux, Redux Thunk, and TypeScript

?? A well-structured boilerplate and Starter for Next.js 12+, Tailwind CSS 3, Redux, Redux Thunk, and TypeScript ⚡️ Made with developer experience first ESLint + Prettier + Lint-Staged + VSCode setup

null 4 Nov 28, 2022
A Next + TypeScript Starter. Featuring Styled-Components, ESLint, Prettier, Axe a11y monitoring, Fathom analytics, sitemap generation, and more!

Next + TypeScript Starter A Next + TypeScript Starter by Justin Juno. Featuring Styled-Components, ESLint, Prettier, Axe a11y monitoring, Fathom analy

Justin Juno 11 Dec 13, 2022
:fire: A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices.

Start your next react project in seconds A highly scalable, offline-first foundation with the best DX and a focus on performance and best practices Cr

react-boilerplate 28.9k Jan 7, 2023
A full-stack dApp starter built on Ethereum (Solidity) with Next.js (React).

A full stack dApp starter built on Ethereum (Solidity) with Next.js (React) This repo contains boilerplate code for interacting with a simple smart co

Tom Hirst 272 Dec 30, 2022
Next.js + Tailwind CSS + TypeScript starter packed with useful development features

?? ts-nextjs-tailwind-starter Next.js + Tailwind CSS + TypeScript starter packed with useful development features. Made by Theodorus Clarence Features

Cornelius Denninger 7 Nov 12, 2022