matheuslemke/p10racing

ThankYouNext 🖤

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, among others:

• Next.js 12
• Preact
• TypeScript
• Tailwind CSS
• Pre-commit Git hook
• ESLint and Prettier configuration
• Absolute imports
• React strict mode
• Ready-to-use-SEO setup
• Security headers

Table of contents

• General
• Styling
• Performance
• Security
• SEO

1. General

It's all pretty straightforward and comes with features I would expect from a modern Jamstack website. I also added a few measures to ensure good code hygiene. Therefore, besides TypeScript and React strict mode, this template includes a Git hook that executes yarn lint && yarn tsc before the commit.

2. Styling

Tailwind CSS is hotly and controversially discussed in the developer scene, which is why it caught my interest. However, you should have basic knowledge of CSS to be able to use it easily and quickly. For this I can highly recommend Learn CSS! I personally write less CSS code and can implement things faster with Tailwind CSS, but if you don't like it, you can always switch to classic CSS, respectively SASS.

3. Performance

If you like the component-based approach of React but want to build fast, simple static websites, there's an interesting feature in Next.js:

export const config = {
  unstable_runtimeJS: false,
}

This code snippet must be used on the respective page in the pages folder to disable client-side JavaScript. Disadvantage: Features like React Hooks or next/image won't work then!

This template also uses Preact, which has the same features but a smaller file size than React. If you prefer to use React, remove the following line of code in next.config.js:

const withPreact = require('next-plugin-preact')

Next, the withPreact wrapper must be removed from module.exports:

// With Preact:
module.exports = withPreact({
  reactStrictMode: true,
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: securityHeaders,
      },
    ]
  },
})

// Without Preact:
module.exports = {
  reactStrictMode: true,
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: securityHeaders,
      },
    ]
  },
}

4. Security

I have added a few security headers according to the Next.js documentation. Content-Security-Policy is a bit tricky to configure, which is why I didn't add it so you can adjust it to your liking.

5. SEO

The Meta component contains all the content needed for great SEO results. It has predefined props which you can configure anyway you want.