# typescript-nextjs-starter **Repository Path**: haochenyin/typescript-nextjs-starter ## Basic Information - **Project Name**: typescript-nextjs-starter - **Description**: No description available - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: main - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2025-08-18 - **Last Updated**: 2025-08-18 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README

Next.js TypeScript Starter


Non-opinionated TypeScript starter for Next.js
Highly scalable foundation with the best DX. All the tools you need to build your next project.

PRs welcome! License Follow @jpedroschmitz
Created by João Pedro with the help of many wonderful contributors.

## Features - ⚡️ Next.js 15 (App Router) - ⚛️ React 19 - ⛑ TypeScript - 📏 ESLint 9 — To find and fix problems in your code - 💖 Prettier — Code Formatter for consistent style - 🐶 Husky — For running scripts before committing - 🚓 Commitlint — To make sure your commit messages follow the convention - 🖌 Renovate — To keep your dependencies up to date - 🚫 lint-staged — Run ESLint and Prettier against staged Git files - 👷 PR Workflow — Run Type Check & Linters on Pull Requests - ⚙️ EditorConfig - Consistent coding styles across editors and IDEs - 🗂 Path Mapping — Import components or images using the `@` prefix - 🔐 CSP — Content Security Policy for enhanced security (default minimal policy) - 🧳 T3 Env — Type-safe environment variables - 🪧 Redirects — Easily add redirects to your application ## Quick Start The best way to start with this template is using [Create Next App](https://nextjs.org/docs/api-reference/create-next-app). ``` # pnpm pnpm create next-app -e https://github.com/jpedroschmitz/typescript-nextjs-starter # yarn yarn create next-app -e https://github.com/jpedroschmitz/typescript-nextjs-starter # npm npx create-next-app -e https://github.com/jpedroschmitz/typescript-nextjs-starter ``` ### Development To start the project locally, run: ```bash pnpm dev ``` Open `http://localhost:3000` with your browser to see the result. ## Testimonials > [**“This starter is by far the best TypeScript starter for Next.js. Feature packed but un-opinionated at the same time!”**](https://github.com/jpedroschmitz/typescript-nextjs-starter/issues/87#issue-789642190)
> — Arafat Zahan > [**“I can really recommend the Next.js Typescript Starter repo as a solid foundation for your future Next.js projects.”**](https://corfitz.medium.com/create-a-custom-create-next-project-command-2a6b35a1c8e6)
> — Corfitz > [**“Brilliant work!”**](https://github.com/jpedroschmitz/typescript-nextjs-starter/issues/87#issuecomment-769314539)
> — Soham Dasgupta ## Showcase List of websites that started off with Next.js TypeScript Starter: - [FreeInvoice.dev](https://freeinvoice.dev) - [Notion Avatar Maker](https://github.com/Mayandev/notion-avatar) - [IKEA Low Price](https://github.com/Mayandev/ikea-low-price) - [hygraph.com](https://hygraph.com) - [rocketseat.com.br](https://www.rocketseat.com.br) - [vagaschapeco.com](https://vagaschapeco.com) - [unfork.vercel.app](https://unfork.vercel.app) - [cryptools.dev](https://cryptools.dev) - [Add yours](https://github.com/jpedroschmitz/typescript-nextjs-starter/edit/main/README.md) ## Documentation ### Requirements - Node.js >= 20 - pnpm 9 ### Directory Structure - [`.github`](.github) — GitHub configuration including the CI workflow.
- [`.husky`](.husky) — Husky configuration and hooks.
- [`public`](./public) — Static assets such as robots.txt, images, and favicon.
- [`src`](./src) — Application source code, including pages, components, styles. ### Scripts - `pnpm dev` — Starts the application in development mode at `http://localhost:3000`. - `pnpm build` — Creates an optimized production build of your application. - `pnpm start` — Starts the application in production mode. - `pnpm type-check` — Validate code using TypeScript compiler. - `pnpm lint` — Runs ESLint for all files in the `src` directory. - `pnpm lint:fix` — Runs ESLint fix for all files in the `src` directory. - `pnpm format` — Runs Prettier for all files in the `src` directory. - `pnpm format:check` — Check Prettier list of files that need to be formatted. - `pnpm format:ci` — Prettier check for CI. ### Path Mapping TypeScript are pre-configured with custom path mappings. To import components or files, use the `@` prefix. ```tsx import { Button } from '@/components/Button'; // To import images or other files from the public folder import avatar from '@/public/avatar.png'; ``` ### Switch to Yarn/npm This starter uses pnpm by default, but this choice is yours. If you'd like to switch to Yarn/npm, delete the `pnpm-lock.yaml` file, install the dependencies with Yarn/npm, change the CI workflow, and Husky Git hooks to use Yarn/npm commands. > **Note:** If you use Yarn, make sure to follow these steps from the [Husky documentation](https://typicode.github.io/husky/troubleshoot.html#yarn-on-windows) so that Git hooks do not fail with Yarn on Windows. ### Environment Variables We use [T3 Env](https://env.t3.gg/) to manage environment variables. Create a `.env.local` file in the root of the project and add your environment variables there. When adding additional environment variables, the schema in `./src/lib/env/client.ts` or `./src/lib/env/server.ts` should be updated accordingly. ### Redirects To add redirects, update the `redirects` array in `./redirects.ts`. It's typed, so you'll get autocompletion for the properties. ### CSP (Content Security Policy) The Content Security Policy (CSP) is a security layer that helps to detect and mitigate certain types of attacks, including Cross-Site Scripting (XSS) and data injection attacks. The CSP is implemented in the `next.config.ts` file. It contains a default and minimal policy that you can customize to fit your application needs. It's a foundation to build upon. ## License This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for more information.