Bootstrap a new Next.js 13 project in 5 minutes

2 min read

Create a new project

1pnpx create-next-app@latest my-project
Leave all the default settings

Install Prettier ESLint Config

We don't want to wrap around our head about formatting, that's why we want Prettier to do the formatting. Since we already use ESLint, adding Prettier is a bliss:
1pnpm add -D prettier eslint-config-prettier eslint-plugin-prettier
Next, open the eslintrc.json and just add this line:
2  "extends": [
3    "next/core-web-vitals",
4    "plugin:prettier/recommended"
5  ]

Install shadcn/ui

1pnpm dlx shadcn-ui@latest init
You can leave the default options here, too:You can now import beautiful UI components via the CLI:
1pnpm dlx shadcn-ui@latest add button

Favicon and SEO on Next.js 13 App Router

Next.js 13 makes it super easy for you to have great SEO and icons for all devices. First, you need a favicon, a small icon that shows as your website's logo.
Tip: If you need a quick and free (or almost free way) to get a logo, check out Bing AI or AppLogoCreator
Once you have your logo, go on to get different versions of your favicon (e.g. for iOS, Android, and Windows). It's free.Once done, download your favicon package and place all the icons in the public folder and add this to your Next.js metadata in layout.tsx:
1export const metadata: Metadata = {
2  title: "Create Next App",
3  description: "Generated by create next app",
4  manifest: "/site.webmanifest",
5  themeColor: "#ffffff",
6  other: {
7    "msapplication-TileColor": "#ffffff",
8  },
9  icons: {
10    icon: "/android-chrome-512x512.png",
11    shortcut: "/favicon-32x32.png",
12    apple: "/apple-touch-icon.png",
13    other: {
14      rel: "mask-icon",
15      url: "/safari-pinned-tab.svg",
16      color: "#6d28d9",
17    },
18  },

Tips and tricks

Add ts-reset

ts-reset is a library that will magically fix common Typescript problems for you. Just create a reset.d.ts file anywhere in your project and fill it with:
1import "@total-typescript/ts-reset";
Right after installing it:
1pnpm add -D @total-typescript/ts-reset


About the author

Boris Pöhland

Image of Boris Pöhland

Web Developer and Indie Indie Maker. Follow me on X


No comments yet!

What's on your mind?