gregrickaby / nextjs-typescript-starter

A Next.js starter with TypeScript, Tailwind CSS and robust linting.

Next.js TypeScript Starter

Have you ever started a Next.js project from scratch and found yourself trying to get ESLint, Prettier, and Stylelint to play nice? What about setting up a <Layout> component, Tailwind CSS, and types?

If so, this is the starter for you! It's just enough "boilerplate" to get you up and running, without being so opinionated that you have to teardown.

Start coding your next big idea right now, with the Next.js TypeScript Starter!

✨ Features

• Tailwind CSS
• ESLint, Stylelint, Markdownlint, and Prettier
• JSDoc
• Basic <Layout> component
• Experimental Image Support
• Github Action workflow for linting PRs

---

Getting Started

First, install the dependencies:

npx create-next-app my-awesome-app --example https://github.com/gregrickaby/nextjs-typescript-starter --use-npm

Then, run the development server:

npm run dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.tsx. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.ts.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

---

Linting

Lint your code:

npm run lint

Format your code:

npm run format

---

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.