Create a new project
1pnpx create-next-app@latest my-projectInstall 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-prettiereslintrc.json and just add this line:1{
2 "extends": [
3 "next/core-web-vitals",
4 "plugin:prettier/recommended"
5 ]
6}Install shadcn/ui
1pnpm dlx shadcn-ui@latest init
1pnpm dlx shadcn-ui@latest add buttonFavicon 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 realfavicongenerator.net 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 },
19};Tips and tricks
Add ts-reset
ts-reset is a library that will magically fix common Typescript problems for you. Just create areset.d.ts file anywhere in your project and fill it with:1import "@total-typescript/ts-reset";1pnpm add -D @total-typescript/ts-reset
