Create a Next.js app from scratch with create-next-app
Next.js is a React framework that provides a solutions to problems such as:
- bundling & transpiling your React code
- code splitting
- being able to switch between client side rendering & server side rendering depending on the page (e.g. landing page vs. settings page)
- client-side routing
With Next.js we get all of that (and much more!) in a single framework and in this quick lesson we're going to learn how to get started with Next.js by using create-next-app in order to start building a blog!
Tomasz Łakomy: [0:00] Start by running npx create-next-app. I'm going to call it my-nextjs-blog. We are going to be asked to pick a template. We can either use the default starter app, or we can use an example for the Next.js repository.
[0:13] As we can see, there's lots of examples that we can use. Nevertheless, we're going to start from scratch. Going back, I'm going to pick the default starter app. This is going to install react, react-dom, and next for us.
[0:25] Now, it's done. Let's see what we've got. Let me cd into this directory and run code . in order to run Visual Studio Code. We can see that we get the pages directory. Under the pages directory, there's an index.js. This is going to be the entry point of our Next.js application.
[0:40] If we take a look inside of the package.json, we're going to see free scripts that were already configured for us. For now, I'm going to run next dev in order to start our development environment. We can see that it is going to start our development server on localhost:3000.
[0:53] Here it is. There are two important things to notice here. First up, if I change any of the elements on this page, for instance, if I change the title to Learn next.js with egghead.io. If I save that, this change is going to be reflected automatically without me having to refresh the page.
[1:09] Secondly, we can see this tiny widget over here telling us that this page has been pre-rendered. What that means is that with Next.js, we get server side rendering by default. We didn't have to do anything and this page has been rendered on the server and served to the client.