ThankYouNext 🖤 - A Next.js starter template
Tags: nextjs, typescript, saas, a11y
Published: 2021-05-27 14:19:48

Website: https://thankyounext.vercel.app/
GitHub: https://github.com/stevefrenzel/thankyounext
Original post: https://dev.to/stvfrnzl/thankyounext-next-js-starter-template-32fg

---

I first came into contact with [Next.js](https://nextjs.org/) about a year ago and have been a big fan ever since! I love features like routing, image optimization or the flexibility to choose between SSG and SSR (or use both). Especially the developer experience feels more pleasant than with React and the support from people like [Lee Robinson](https://leerob.io/) and [Cassidy Williams](https://cassidoo.co/) is just priceless! To me, Next.js feels like a superset of React, similar like TypeScript to Javascript. 🙂

For this reason, I decided to use Next.js for my personal projects. However, I didn't want to start from scratch every time and painstakingly put everything together until I have a base I feel comfortable coding on. So I decided to create a template to share with the public, as I'm interested in what other people would add, change or improve.

Here you can find an illustration by me dear friend Ingrid, who visualized the flow of this template:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qisszlkyi6r2owd5fq9a.png)

---

It was bootstrapped with [create-next-app](https://nextjs.org/docs/api-reference/create-next-app) and has the following features:

- [Preact](https://preactjs.com/)
- [TypeScript](https://www.typescriptlang.org/)
- [Sass](https://sass-lang.com/)
- [ESLint](https://eslint.org/) and [Prettier](https://prettier.io/) configuration
- [CSS reset by Andy Bell](https://piccalil.li/blog/a-modern-css-reset)
- [Absolute imports](https://nextjs.org/docs/advanced-features/module-path-aliases)
- [React strict mode](https://nextjs.org/docs/api-reference/next.config.js/react-strict-mode)
- Ready-to-use SEO setup
- Many security headers

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:

- [A perfect Google Lighthouse score](https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fthankyounext.vercel.app%2F)
- [No accessibility violations](https://wave.webaim.org/report#/https://thankyounext.vercel.app/)
- [Ships with zero byte of JavaScript](https://estimator.dev/#https://thankyounext.vercel.app/)
- [No HTML warnings or errors](https://validator.w3.org/nu/?doc=https%3A%2F%2Fthankyounext.vercel.app%2F)
- [No CSS errors](https://jigsaw.w3.org/css-validator/validator?uri=https%3A%2F%2Fthankyounext.vercel.app%2F&profile=css3svg&usermedium=all&warning=1&vextwarning=&lang=en)

---

# 1. Setup ⚙️

## 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](https://preactjs.com/guide/v8/differences-to-react/). Want to switch back to React? Easy as cake, just delete or comment out the following in `next.config.js`:

```javascript
webpack: (config, { dev, isServer }) => {
  if (!dev && !isServer) {
    Object.assign(config.resolve.alias, {
      react: 'preact/compat',
      'react-dom/test-utils': 'preact/test-utils',
      'react-dom': 'preact/compat',
    });
  }
  return config;
},
```

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](https://leerob.io/blog/fonts) - I'm using the following web safe fonts to increase performance for this template:

```css
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:

```javascript
export const config = {
  unstable_runtimeJS: false,
};
```

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

---

# 3. Accessibility 🌍

Make sure your website or application can be used by any human being. If you're not familiar with the topic of accessibility, here are some resources you can check out:

- [Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/WAI/standards-guidelines/wcag/)
- [MDN Web Docs - Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
- [WebAIM resources](https://webaim.org/resources/)
- [What you should know about accessibility and SEO](https://moz.com/blog/accessibility-seo-1)
- [Motherf\*cking website (NSFW)](http://motherfuckingwebsite.com/)
- [Inclusive components](https://webaim.org/resources/)
- [Webbed briefs](https://briefs.video/)

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](https://twitter.com/leeerob/status/1381605537742254082), I became aware that my standard **Next.js** project was missing a bunch of them and didn't rank so well at [Mozilla Observatory](https://observatory.mozilla.org/).

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](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP)
2. [Referrer-Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy)
3. [X-Frame-Options](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options)
4. [X-Content-Type-Options](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Content-Type-Options)
5. [X-DNS-Prefetch-Control](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-DNS-Prefetch-Control)
6. [Strict-Transport-Security](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Strict-Transport-Security)
7. [Permissions Policy (formerly known as Feature Policy)](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/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:

- [A global stylesheet](https://nextjs.org/docs/basic-features/built-in-css-support#adding-a-global-stylesheet)
- [CSS (or Sass) Modules](https://nextjs.org/docs/basic-features/built-in-css-support#adding-component-level-css)
- [CSS-in-JS](https://nextjs.org/docs/basic-features/built-in-css-support#css-in-js)
- [styled-components](https://styled-components.com/)
- [Tailwind CSS](https://tailwindcss.com/)
- [No CSS at all](https://duckduckgo.com/?t=ffab&q=css+sucks&ia=web)

---

# 6. Search engine optimization 🔍

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.