/jsilva-web-site

jsilva web site portifoio

Primary LanguageCSSMIT LicenseMIT

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 13
  • ⚛️ 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.

# 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:

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!”
— Arafat Zahan

“I can really recommend the Next.js Typescript Starter repo as a solid foundation for your future Next.js projects.”
— Corfitz

“Brilliant work!”
— Soham Dasgupta

Showcase

List of websites that started off with Next.js TypeScript Starter:

Documentation

Requirements

  • Node.js >= 12.22.0
  • pnpm 7

Directory Structure

  • .github — GitHub configuration including the CI workflow.
  • .husky — Husky configuration and hooks.
  • public — Static assets such as robots.txt, images, and favicon.
  • 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.

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.

License

This project is licensed under the MIT License - see the LICENSE.md file for more information.