Next.js Template

What is inside of this template?

Structure

That's how the project will looks like:

next.config.js
package.json
postcss.config.cjs
tailwind.config.ts
biome.json

Used Technologies

Biome

The project use Biome to lint and format the code.

Why use Biome?
  • Biome is about 35x faster than Prettier

  • Avoid obscure error messages, when we tell you something is wrong, they tell you exactly where the problem is and how to fix it.

  • Out of the box support for all the language features you use today. First class support for TypeScript and JSX.

  • With tight internal integration they are able to reuse previous work and any improvement to one tool improves them all.

Biome Documentation

Ky for HTTP requests

The project use Ky to HTTP requests.

Why use Ky?
  • Method shortcuts (ky.post())

  • Treats non-2xx status codes as errors (after redirects)

  • Timeout support

  • URL prefix option

  • Hooks

  • Retries failed requests

Ky Repository

Shadcn UI

The project uses Shadcn to build UI components.

Why use Shadcn UI?
  • Copy and paste components

  • Based on radix and totally customizable and aceppt changes

  • In a few days I'll change to Kanpeki UI. It's way better than Shadcn, it offers accessible components with all properties and some useful hooks to improve the user experience

Shadcn Website

Zod

The project uses Zod for validation.

Why use Zod?
  • Enhancing type safety at runtime

  • infer the type from the data schemas you define

  • display errors at runtime during user interactions with the UI

Zod Documentation

@t3-oss/env-nextjs

The project uses t3-oss to validate env files

Why use T3 Env?
  • type-safe environment variables

  • Validating envs are quite easy and can be done in a few lines of code

  • Support for multiple environments

T3 Env Documentation