The following is my current frontend stack of choice as of writing this.

Setting up Next.js

https://nextjs.org/docs

npx create-next-app@latest --typescript
cd project-name
yarn dev

I like to add sources folders in src/ folder

mkdir src
mv pages src
mv styles src

I set my next.config.js as follows:

/** @type {import('next').NextConfig} */
const nextConfig = {
	...
	reactStrictMode: false,
  eslint: {
    ignoreDuringBuilds: true,
  },
  typescript: {
    ignoreBuildErrors: true,
  },
	webpack(config) {
    config.module.rules.push({
      test: /\\.svg$/,
      use: ["@svgr/webpack"],
    });

    return config;
  },
};

module.exports = nextConfig;

Ignoring build errors makes it so that Typescript errors don’t break site builds.

You’ll need to npm install --save-dev @svgr/wepback to add the SVG config and be able to import .svg files directly in your code.

By default reactStrictMode will be set to true, which will result in everything in dev mode being rendered twice in the browser to help warn you of problems in your code. You can disable this.

Typescript

Enable aliases to allow you to import files using absolute paths like import ComponentName from "src/components/ComponentName"

You can do this by modifying your tsconfig.json and adding *"baseUrl"*: ".", to compilerOptions .

(In VSCode you may need to run Cmd+Shift+P > Typescript: Restart TS Server for the changes to reflect in the linting)

I also add the following to my tsconfig.json

// tsconfig.json
{
  "compilerOptions": {
		...
		"baseUrl": ".",
		"noImplicitAny": false,
	},
	...
}

Add TailwindCSS

I love TailwindCSS because it is so insanely fast to work with and drastically reduces the styling code you need to write.

https://tailwindcss.com/docs/installation/using-postcss