How to Use Create Next App
October 16, 2019
There are lots of ways to get started with React. The most common has been Facebook’s own, Create React App. Other options include the static progressive web app generator, Gatsby, and even using it directly in a site without a build step. However, my favorite way has always been to use Next.js.
Next.js is a React framework that allows you to seemlessly build sites that can either server render or statically render pages depending on the data needed. Next.js also adds a router and css-in-jss solution out of the box with zero setup needed. But it also remains extensible enough to change for your needs. Add in the fact that you can use API routes for serverless functions in the same repository with no additional work and using Next.js is a no brainer.
Setting up Next.js used to involve create a project, installing a couple packages, and setting up some folder structures. It wasn’t difficult, but also not ideal either. Create React App used to be a community-maintained project that is now part of the Next.js monorepo. And by using Create React App, it could not be easier to set up a Next.js application. So, let me show you how! Open your console or terminal and assuming you have npm with npx installed, type the following command:
You will then be asked what you want to name your project. Give it a name and return. And that’s it. That’s all you need to do. You now have a Next.js project all set up and ready to use and run!
Now that you have Next.js set up, you’re probably going to have lots of questions on how to do a variety of different things. But Create Next App has you covered here too. Next.js has a collection of examples covering everything from using Apollo to TypeScript to Socket.io to Firebase and much more. And all of them are easily usable Create Next App. Here’s how:
npx create-next-app --example <name-of-example> <name-of-project>
An example with redux would look like this:
npx create-next-app --example with-redux my-redux-app
Trying out a variety of the examples is great way to get comfortable with tools you may need in your project and/or learn new things. You’ll soon see with the examples that Next.js has a ton to offer and is incredibly easy to use. I definitely recommend giving it a go with your next React app. Be sure to take some time and learn more about Next.js and Create Next App.
A personal site for George Rodier, a software developer living in Philadelphia and building web applications for a living.