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...

next-graphql-server is a library for building production-grade GraphQL servers using Next.js with API Routes

next-graphql-server next-graphql-server is an easy to use Next.js library for creating performant GraphQL endpoints on top of Next.js API Routes. Star

Nov 21, 2022

Opinionated Next.JS Boilerplate with TypeScript and Material-UI

Next.JS Boilerplate This is an opinionated Next.js boilerplate, with: Fully typed with TypeScript. Style/Theme engine and Icons from Material UI. Code

Jun 28, 2022

A Tauri + Next.js (SSG) template, with TailwindCSS, opinionated linting, and GitHub Actions preconfigured

A Tauri + Next.js (SSG) template, with TailwindCSS, opinionated linting, and GitHub Actions preconfigured

Tauri + Next.js Template This is a Tauri project template using Next.js, bootstrapped by combining create-next-app and create tauri-app. This template

Dec 30, 2022

Simple starter for SvelteKit with Tailwind CSS already set up and ready to go.

Get Started Simple Sveltekit boilerplate with Tailwind CSS already set up. Just run npm install to download the dependencies. Info I use Tailwind in p

Dec 23, 2022

🚀 Battle-tested Next.js TypeScript Prisma template with an opinionated architecture. 🔋 Included ™️

🚀 Battle-tested Next.js TypeScript Prisma template with an opinionated architecture. 🔋 Included ™️

🚀 The Ultimate Next.js Starter Pack Next.js ^12 + TypeScript + Prisma + Chakra UI starter packed with useful development features. I've adopted indus

Dec 10, 2022

Starter for Next.js projects with a basic page transition logic.

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Oct 27, 2022

CLI to scaffold tailwindcss-ready projects

CLI to scaffold tailwindcss-ready projects

Create TailwindCSS Project (create-tw) The easiest way to get started with TailwindCSS. It uses popular scaffolding scripts like create-next-app or cr

Dec 29, 2022

There can be more than Notion and Miro. Affine is a next-gen knowledge base that brings planning, sorting and creating all together. Privacy first, open-source, customizable and ready to use.

There can be more than Notion and Miro. Affine is a next-gen knowledge base that brings planning, sorting and creating all together. Privacy first, open-source, customizable and ready to use.

AFFiNE.PRO The Next-Gen Knowledge Base to Replace Notion & Miro. Planning, Sorting and Creating all Together. Open-source, Privacy-First, and Free to

Jan 9, 2023
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
An opinionated Next.js + Chakra + TypeScript starter

Nextjs + Chakra + Typescript Starter ✨ An opinionated Next.js + Chakra + TypeScript starter packed with: ⚡️ Next.js 12 ⚛️ React 18 ✨ TypeScript ?? Cha

jaclyn 3 Sep 17, 2022
Prototype of real-time comments and a proposal of how to make it "production-ready".

Real-time comments prototype Simple demonstration of real-time commenting. Installation After forking it, run npm install, then you need two environme

Tiger Abrodi 3 Jan 16, 2022
The high efficent browser driver on top of puppeteer, ready for production scenarios.

browserless is an efficient driver for controlling headless browsers built on top of puppeteer developed for scenarios where performance matters. High

microlink.io 1.2k Jan 6, 2023
A production-ready ECPay AIO SDK for Node.js

node-ecpay-aio A production-ready 綠界全方位金流(ECPay All-In-One, AIO) SDK for Node.js with TypeScript Support Documentation 本模組詳細使用說明請見 User Guide Overview

simen 21 Nov 1, 2022
MUI Core is a collection of React UI libraries for shipping new features faster. Start with Material UI, our fully-loaded component library, or bring your own design system to our production-ready components.

MUI Core MUI Core contains foundational React UI component libraries for shipping new features faster. Material UI is a comprehensive library of compo

MUI 83.6k Dec 30, 2022
A secure MERN Stack boilerplate ready for Production that uses Docker & Nginx.

A production ready & secure boilerplate for the MERN Stack that uses Docker & Nginx. Focus on the product and not the setup. You can directly start wo

Karan Jagtiani 34 Dec 23, 2022
Opinionated collection of TypeScript definitions and utilities for Deno and Deno Deploy. With complete types for Deno/NPM/TS config files, constructed from official JSON schemas.

Schemas Note: You can also import any type from the default module, ./mod.ts deno.json import { type DenoJson } from "https://deno.land/x/[email protected]

deno911 2 Oct 12, 2022
A highly customizable platform ready to be a portfolio website, and become a lot more with some of your own components

Vextra Elegant and animated portfolio website. Demo: vextra.vercel.app Vextra is a portfolio template, packed with animations with a satisfying flow t

null 3 Sep 19, 2022