Table of contents
npm install and then
npm run dev to start h4ck1ng. 👾
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.
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
If you want to clean up your project, run
npm uninstall preact preact-compat to uninstall it.
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;
If you want to use things like next/image or React hooks though, you will have to remove it, otherwise they will not work.
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:
- Web Content Accessibility Guidelines (WCAG)
- MDN Web Docs - Accessibility
- WebAIM resources
- What you should know about accessibility and SEO
- Motherf*cking website (NSFW)
- Inclusive components
- Webbed briefs
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.
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:
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:
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: