Create a New Next.js and TypeScript Project

Instructor: [0:01] Let's begin by learning what Next.js is. Next.js is an open-source React framework built on top of Node.js. It enables developers to build super fast, optimized websites and web apps.

[0:12] While traditional React apps are rendered on the client side, Next.js gives you the option to also render your pages on the server side. Its features like the built-in router, per-page rendering options, incremental static regeneration, TypeScript support, etc., provide the best-in-class developer experience and rapid feature development.

[0:33] The React documentation lists Next.js as the recommended tool chain for building server-side-rendered web apps. It is originally built by Guillermo Rauch and is developed and maintained by Vercel. That's a small intro to what Next.js is.

[0:49] To begin with this course, go ahead and clone this repo. This is a mono repo that contains all 15 lessons that we're going to go through in this course. Feel free to pause this video and clone the repo.

[1:04] After you've cloned this repo, open it up in Visual Studio Code. The first thing we need to do is run npm install at the root of the project. This will install all of the packages and dependencies for this course.

[1:16] Throughout this course, we'll be working in the Exercises folder. As the first exercise, we are going to create a new Next.js TypeScript project. Let's see into the Exercises folder and enter the first exercise. To create a new Next.js TypeScript project, we need to run npx create-next app. We'll provide a name for our app. Let's call it Hello Next.js.

[1:45] Then we will pass the TypeScript flag. Just hit y on this step, and there we go. This command will create our Next.js TypeScript project called Hello Next.js. If we cd into it and execute npm run dev, it will start our development server. We can visit localhost:3000, and we're going to see the new project page.

[2:13] That's about it. To recap, we learned what Next.js is, some facts and history about Next.js, and we've created a new Next.js TypeScript project.