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

Related tags

Boilerplates next-typescript-starter
Overview

Next + TypeScript Starter

A Next + TypeScript Starter by Justin Juno. Featuring Styled-Components, ESLint, Prettier, Axe a11y monitoring, Fathom analytics, sitemap generation, and more!

image image image image image

✅ Feature Overview.

  • Styled-Components with global styles, a modern reset, and theme support.
  • ESLint + Prettier setup for maintaining code quality and formatting.
  • useAnalytics hook for quickly enabling site analytics via Fathom.
  • useAxe hook for monitoring and reporting accessibility issues via Chrome console.
  • Custom SEO component based on Open Graph standards.
  • Custom Link component for handling both internal and external links.
  • Custom 404 page for invalid routes.
  • Automatic sitemap and robots.txt generation with next-sitemap.

🚀 Getting Started.

  1. Clone and/ or download the project locally.
  2. Navigate to the projects root directory and install its dependencies: npm i
  3. Open lib/metaFields in your editor and update the default meta fields. Note: this is an important step, as these fields are referenced in the SEO component, useAnalytics hook, and next-sitemap.
  4. Rename the .env.sample file to .env.local and add your Fathom site id to the NEXT_PUBLIC_FATHOM_SITE_ID environment variable. You’ll also need to add this environment variable to your project's deployment settings in Vercel (or wherever your project is hosted). Note: If you are not using Fathom analytics, you can delete the hooks/useAnalytics file and remove its invocation from _app.tsx.
  5. You’re ready to code! Start your development environment npm run dev and build something awesome.

🔗 Documentation and Resources.

  • Next - React framework for production.
  • TypeScript - Strongly-typed programming language that builds on JavaScript.
  • Styled-Components - CSS-in-JS styling solution.
  • ESLint - Code analysis tool monitoring code and maintaining quality.
  • Prettier - Opinionated code formatter.
  • Axe-Core - Accessibility testing library.
  • Next-Sitemap - Sitemap generator for Next.
  • Fathom - Privacy first analytics.

🙇‍♂️ Credits.

⭐️ Contributions.

Thanks for your interest in this project! Pull Requests are welcome for any level of improvement, from small typos to pesky bugs, let’s make this project better. When opening or responding to an issue, please be kind, patient, and open to feedback. Derogatory comments, insults, etc. aren't cool, nor tolerated.

You might also like...

This is a minimal Next-Js boilerplate for TypeScript and Tailwind.

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://

Sep 15, 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

React Starter Kit — isomorphic web app boilerplate (Node.js, Express, GraphQL, React.js, Babel, PostCSS, Webpack, Browsersync)

React Starter Kit — isomorphic web app boilerplate (Node.js, Express, GraphQL, React.js, Babel, PostCSS, Webpack, Browsersync)

React Starter Kit — "isomorphic" web app boilerplate React Starter Kit is an opinionated boilerplate for web development built on top of Node.js, Expr

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.

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

Dec 19, 2022
Comments
  • Feat/updates-for-2022

    Feat/updates-for-2022

    Context

    This PR contains several updates to the eslintrc file and some light refactoring to existing directory structures and the files within them. Despite these changes, everything will still work and function as expected.

    opened by justinjunodev 1
  • Bump next from 12.0.10 to 12.1.0

    Bump next from 12.0.10 to 12.1.0

    Bumps next from 12.0.10 to 12.1.0.

    Release notes

    Sourced from next's releases.

    v12.1.0

    Core Changes

    • Relay Support in Rust Compiler: #33702
    • fix eslint link-passhref rule: #33857
    • update webpack: #33831
    • Flush buffered vitals metrics on page mount: #33867
    • fix problem with HMR when middleware and page reference the same node_module: #33873
    • Refactor page component getter in web server: #33759
    • update NextResponse default redirect status to 307 to match docs: #33505
    • Bug fix: dynamic page should not be interpreted as predefined page: #33808
    • Group streaming experimental apis: #33878
    • Encapsulate routing and initial hydration: #33875
    • Optimize offline condition judgment: #33238
    • Ensure external beforeFiles rewrites are handled with next/link: #33888
    • Fix parsing params for i18n optional route in minimal mode: #33896
    • Ensure browserslist extends works properly: #33890
    • Fix image cache race condition: #33883
    • Add support for Relay projects without artifactDirectory: #33918
    • fix: handle jsxspreadattribute in inline-script-id eslint rule: #32421
    • feat(next-swc): Update swc: #33724
    • Update to latest version of amphtml-validator: #33967
    • Warn in dev mode when script tags are added with next/head: #33968
    • Ensure optional chaining in swc matches babel: #33995
    • Use react-dom/server.browser in Node.js: #33950
    • Ensure external middleware rewrite is handled correctly: #33962
    • Update Terser to v5.10.0, fix minification issues: #33045
    • Warn in dev mode when stylesheets are added using next/head: #34004
    • Use ReadableStream in RenderResult: #34005
    • Fix suffix ordering while streaming: #34011
    • Don't use yarn if a package-lock.json file is found: #31926
    • Do not warn when application/ld+json scripts are used with next/head: #34021
    • Babel & next-swc: Fix exporting page config with AsExpression: #32702
    • Detect per page runtime config for functions manifest: #33945
    • Add JSDoc to config options: #32915
    • Update font-stylesheet-gathering-plugin.ts: #30709
    • Add decoratorMetadata flag if enabled by tsconfig: #32914
    • fix: data url handling in css-loader: #34034
    • Place 'charset' element at the top of : #28119
    • Fix detection of anchor click events inside svg: #23272
    • Allow passing nothing as custom jest config: #32328
    • Fixes #31240: Adding a recursive addPackagePath function in webpack-config: #31264
    • Require component rendered as child of Link to pass event to onClick handler: #27723
    • Allow scroll prevention on hash change: #31921
    • Add support for async fn / promise in next.config.js/.mjs: #33662
    • Fix lazyRoot functionality for next/image: #33933
    • Change SWC minify from beta to release candidate: #34056
    • Make Router state immutable: #33925
    • Stop exposing internal render and renderError methods from next/client: #34069
    • Add api-utils helper for testing: #34078

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
Owner
Justin Juno
Husband. Father of twins. Software Developer at All Turtles. Pronouns: He/him.
Justin Juno
GitHub https://next-typescript-starter-juno.vercel.app/
NextJS BoilerPlate for Alpha version(Next.js + Styled Components + Customization + Theme)

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://

Super Ninja 8 Oct 24, 2022
NextJS, TypeScript and Styled Components project boilerplate

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://

Mateus 2 Sep 21, 2021
Next Boilerplate with TypeScript, Redux Toolkit and Styled-Component.. For now

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://

Ibrahim Yaacob 2 Feb 17, 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
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
A highly opinionated and complete starter for Next.js projects ready to production

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.

Fukuro Studio 28 Nov 27, 2022
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
Minimal Electron Starter Kit built with Typescript, React, Webpack 5 and Babel 7

electron-webpack-boilerplate Minimal Electron Starter Kit built with Typescript, React, Webpack 5 and Babel 7 To create a JS library, check out js-lib

Francisco Hodge 10 Aug 16, 2022
Fastify + Typescript starter

Fastify + Typescript starter A really basic API template powered by: Fastify Typescript EsLint + Prettier Jest + Supertest Available scripts: npm run

Andrea 6 Aug 24, 2022
⚡️ 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

Saad Irfan ⚡️ 66 Nov 20, 2022