nextjs-starter-typescript

• This is a template repository that illustrates how to set-up a Next.js project using TypeScript. It was bootstrapped with create-next-app.
• I have included ESLint, Prettier and TypeScript compiler configs to provide a smooth developer experience. Simply run yarn lint to lint and format your code, and to check it for type errors. A pre-commit hook has been set-up to enforce these strict standards. Your team can use this template to hit the ground running!
• The TypeScript compiler has been configured to support absolute imports, see this as an example. So no more winding relative paths: import Something from "../../../where/is/something".
• You will notice that the .gitignore doesn't specify the .env file. This is intentional for Next.js versions 9.4 and up:

  Note: .env files should be included in your repository, and .env*.local should be in .gitignore, as those files are intended to be ignored. Consider .local files as a good place for secrets, and non-local files as a good place for defaults.

Always refer to the official docs for current best practices.

TyepeScript? 🤔

What Is It

TypeScript is a superset of JavaScript that adds static typing to the language and it compiles to plain old JavaScript. This means that if you already know how to write JavaScript, you already know how to write TypeScript! Simply rename your .js and .jsx files to .ts and .tsx, respectively.

Why Use It

JavaScript is a notoriously difficult language to debug. It offers little to none compile-time checks, and it's up to the developer to find and fix errors encountered at runtime. This is where TypeScript's type system comes in - it will help you catch bugs early at compile time. I can't emphasize this enough - TypeScript will save you significant time from manually debugging your code. If your TypeScript code compiles, you can be very certain that it will work as expected.

There are several other reasons to choose TypeScript: it supports latest ECMAScript features while providing backward compatibility with older browsers, there is amazing IDE and tooling support for it, most of the widely used node packages provide their types so that you can use them with TypeScript, and its code is all open-sourced, backed by Microsoft!

The developer community loves TypeScript ♥️😍. Don't believe me? TypeScript was the second most loved language in Stack Overflow's 2020 Developer Survey, beating out Python, Java, JavaScript, etc. Two out of the three front-end framework titans - Angular and Vue.js 3.0 - are primarily written in TypeScript (the React team also embraces types, but through Flow, which is a static type checker for JavaScript).

So What's the Catch?

To fully utilize the power of TypeScript, you will have to learn its type system. It's not complicated and will remind you of Java. I would recommend this as a resource for learning the type system, and this as a cheat sheet for using TypeScript with React.

This project also includes an example of a strictly typed React functional component.

As an example of a production ready Next.js + TypeScript (+ MongoDB + Material-UI) app, refer to the DMS project repository.

Development

The following is auto-generated from create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn 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.

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.