Next.js is self-branded as the React framework for static pages, progressive web apps, mobile web apps, SEO-friendly pages, and — most especially — server-side rendering. It facilitates static exporting with just a line of command, ships with a CSS-in-JS library called Styled JSX, and includes features like code splitting, universal rendering, and hot reloading.
First, let’s make sure that your development environment is ready.
- If you don’t have Node.js installed, install it from here. You’ll need Node.js version 10.13 or later.
- You’ll be using your own text editor and terminal app for this tutorial.
If you are on Windows, we recommend downloading Git for Windows and use Git Bash that comes with it, which supports the UNIX-specific commands in this tutorial. Windows Subsystem for Linux (WSL) is another option.
Create a Next.js app
To create a Next.js app, open your terminal,
cd into the directory you’d like to create the app in, and run the following command:
npx create-next-app myapp
newappis the application name of your choosing. Remember to use all lowercase letters when naming to conform to the npm rule, so you don’t get errors like this:
Could not create a project called “newApp” because of npm naming restrictions: * name can no longer contain capital letters
You can now change the directory to your new folder and run the dev server with:
npm run dev
Make sure you have admin rights on the machine you are using so you avoid access errors. Your app on
localhost:3000 should look exactly like this:
In your file manager, you will see that everything you need at the start has been created for you, from the pages folder that contains the
index.js file to the component folder that has the nav file.
With the new Create Next App boilerplate, you can start a project in a second today because it has no dependencies. According to the Next blog, the size of the starter app was about 5.4MB on the unofficial version, and after all the optimizations have been done, more than 4.7MB has been shredded off the app. Now on install, the Create Next App size is 604kB.
Amazing features like this one make a very convincing case for Next.js: this new version has offline support shipped with it. So if you’re working on your Next app and you go offline before starting a new project, it will automatically detect that you are offline and also load up your project using your local package cache, which I think is super amazing and thoughtful.
New default project template
Create Next App uses a new project template that is carefully designed for a modern Next.js application. Initially, versions on the current Next.js and versions displayed in Create Next App did not match, but now that the project is officially owned by Next.js, the template will always be up to date with the latest Next version.
Support for examples
This is another great feature that I am excited about. Next.js has a lot of code examples that show how to get started completing various tasks with Next. With this new release of Create Next App, you can now start up an application as a kind of instance of an example in the Next collection.
This is really brilliantly thought out, as I can assume that these examples are useful guides for Next developers. All you have to do is add the example name in your startup command, so if you wanted to deploy the blog starter example, all you have to do in your terminal is run the command below:
npx create-next-app --example blog-starter
This will automatically scaffold a Next.js app for you in the form it is illustrated in the Next blog starter example.
The new Create Next App is now part of the Next.js mono repository, so it is extensively tested with the very same integration test suite as the Next.js project itself. This ensures an ecosystem is in sync, and everything just works in every release.
This post has shown you the new Next.js boilerplate called Create Next App, which is the officially supported Next.js starter application. We looked at all the new features one by one and also talked about how to get started using them.
About the author
- 0 comments