ThankYouNext 🖤 - A Next.js starter template

Steve Frenzel — Thu, 27 May 2021 14:19:48 +0000

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 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 and Cassidy Williams 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:

It was bootstrapped with create-next-app and has the following features:

Preact
TypeScript
Sass
ESLint and Prettier configuration
CSS reset by Andy Bell
Absolute imports
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:

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. Want to switch back to React? Easy as cake, just delete or comment out the following in next.config.js:

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

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:

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 didn't rank so well at Mozilla Observatory.

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:

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 🔍

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.

Forem: Steve Frenzel