Skip to main content

ThankYouNext 🖤

A highly performant and accessible Next.js starter template

This Next.js starter template is meant to be easy to use, fun to work with and very performant. It was bootstrapped with create-next-app and has the following

Features

If possible, I recommend deploying it via Vercel, as it's a pain free process and gets you up and running within minutes (hint: This template was deployed via Vercel). More features are:


Table of contents

  1. Setup ⚙️
  2. Perfomance 🏃‍♀️
  3. Accessibility (A11y) 🌍
  4. Security 🔒
  5. Styling 💅
  6. Search engine optimization (SEO) 🔍
  7. On my own behalf 🙇‍♂️

1. Setup

⚙️

First run npm install and then npm run dev to start h4ck1ng. 👾

1.1 TypeScript

If you don't feel comfortable using TypeScript or simply don't need it, just rename all .tsx files in the pages folder to js and in the components folder to .jsx. Then run npm uninstall typescript to remove it from your project. You should use it though, especially when working on more complex projects. It's painful at first, but very rewarding once you get the hang of it.

1.2 Preact

This template runs with Preact instead of React, which results in a smaller build and the same developer experience. More info about the differences to React.Want to switch back to React? Easy as cake, just delete or comment out the following in next.config.js:

Code in next.config.js for Preact

If you want to clean up your project, run npm uninstall preact preact-compat to uninstall it.


2. Performance

🏃‍♀️

Inspired by this post from Lee Robinson - Web Fonts in 2021 - I'm using the following web safe fonts to increase performance for this template:

font-family: Georgia, 'Times New Roman', Times, serif;

This template also ships with zero byte of client-side JavaScript, thanks to the following lines of code:

Code showing how to deactivate run time JavaScript in Next.js

If you want to use things like next/image or React hooks though, you will have to remove it, otherwise they will not work.


Accessibility (A11y)

🌍

It is your responsibility as a developer to make sure your website or application can be used by any human being. If you're not familiar with this topic, here are some resources you can check out:

This template already includes some elements that will improve the accessibility of your project, like a skip link, an external link component, keyboard focus (working in all major browsers) and a proper, flexible font size.


4. Security

🔒

Thanks to Lee Robinson's tweet about security headers, I became aware that my standard Next.js project was missing a bunch of them and only ranked D at securityheaders.com. I followed his configuration with some slight adjustments, but please configure them according to your project purpose. In next.config.js you will find the following seven security headers:

  1. Content Security Policy
  2. Referrer-Policy
  3. X-Frame-Options
  4. X-Content-Type-Options
  5. X-DNS-Prefetch-Control
  6. Strict-Transport-Security
  7. Permissions Policy (formerly known as Feature Policy)

5. Styling

💅

You have a lot of options to style your project, I just went with good ol' Sass. If it gets more complex, you could also use Sass modules for individual components. Use whatever works best for you, for example:


6. Search engine optimization (SEO)

🔍

I've created a Meta.tsx component which does all the heavy lifting regarding SEO. You can setup default props or feed it dynamically with data, depending on the context.


7. On my own behalf

🙇‍♂️

The main reason to create this template was to get started right away when creating a website, instead of copy and pasting from previous projects. The layout was somewhat inspired by one of my favorite records and album artworks, "Sunbather" by Deafheaven:

Sunbather artwork by Deafheaven

I will do my best to keep this project up-to-date, especially the security headers, as they seem to change every few years. I would also like to thank a bunch of people (I know and don't know personally), who helped me on my coding journey. In no particular order: