Initialize a Next.js 9 project with TypeScript

Instructor: [00:00] First, let's create a directory for our project. Let's call it my app. Then, let's go into the directory and run yarn init -y to initialize the project and then we can install Next, React, ReactDOM. To use TypeScript, we also need to install TypeScript and also the typings for React, ReactDOM and node as dev dependencies.

[00:33] Let's have some helper NPM scripts to the package.json file, so that we can launch our dev server to the project for production or start a production server for our Next JS app. With all this setup in place, let's create an entry point for our project in an index.tsx file in a new pages territory.

[00:55] Note that pages is a special directory. Next.js does the automatic routing based on the structure of this directory and the names of the files in it. This index.tsx file will automatically become the root index route of our application.

[01:13] Let's create a simple component that prints out hello world. All files inside the pages should have a default export that exports the component that we want to render as the Web page itself.

[01:28] You may also have noticed that we're not importing React here. There's also no need to render anything with react-dom, because everything is handled by Next.js. The type of this component itself is not actually React functional component but Next page.

[01:45] We also don't need to write Babel config to set up the JSX transformation. Now we can launch the dev server by running yarn Dev. Now we can see our page successfully rendered as the index page of our app. We can also see that a tsconfig.json file is automatically generated by Next.js.