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.

Setup

npx create-next-app myapp

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

Zero dependencies

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.

Offline support

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.

Extensive testing

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.

Conclusion

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.