Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jpedroschmitz/typescript-nextjs-starter
Non-opinionated TypeScript starter for Next.js. All the tools you need to build your next project ⚡️
https://github.com/jpedroschmitz/typescript-nextjs-starter
hacktoberfest nextjs react starter typescript
Last synced: about 1 month ago
JSON representation
Non-opinionated TypeScript starter for Next.js. All the tools you need to build your next project ⚡️
- Host: GitHub
- URL: https://github.com/jpedroschmitz/typescript-nextjs-starter
- Owner: jpedroschmitz
- License: mit
- Created: 2020-03-19T18:26:38.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-09-26T21:34:56.000Z (about 2 months ago)
- Last Synced: 2024-09-26T23:22:25.039Z (about 2 months ago)
- Topics: hacktoberfest, nextjs, react, starter, typescript
- Language: CSS
- Homepage: https://next-ts.joaopedro.dev
- Size: 3.19 MB
- Stars: 1,211
- Watchers: 9
- Forks: 142
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
- Awesome-NextJs - typescript-nextjs-starter - [demo](https://next-ts.joaopedro.dev/) (Nextjs Starter)
README
Non-opinionated TypeScript starter for Next.js
Highly scalable foundation with the best DX. All the tools you need to build your next project.
## Features
- ⚡️ Next.js 14 (App Router)
- ⚛️ React 18
- ⛑ TypeScript
- 📏 ESLint — 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
## Quick Start
The best way to start with this template is using [Create Next App](https://nextjs.org/docs/api-reference/create-next-app).
```
# 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
# pnpm
pnpm 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:
- [hygraph.com](https://hygraph.com)
- [rocketseat.com.br](https://www.rocketseat.com.br)
- [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 format` — Runs Prettier for all files in the `src` directory.
### 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.
## License
This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for more information.