Table of Contents
Next.js is a framework built on top of React to provide code optimizations and the option to statically generate pages, server-side render, or client-side rendering. The wide range of possibilities makes it a great choice when building a React project. It has an amazing developer experience by providing routing, code splitting, multiple built in CSS options, hot reloading with fast refresh, typescript support, optional api routes, and the multiple rendering options mentioned above. Next.js also added image optimization recently to automate the serving of different sizes and formats.
Creating a Next app
To create a new Next project, make sure you have Node.js 10.13 or later and either run npx create-next-app for npm or yarn create-next-app for yarn. Be forewarned that if you have yarn installed, the npx command will install using yarn instead. You can run npx create-next-app --use-npm to avoid this. This is a known issue and hopefully they are working on a fix. Once the command is ran, simply follow the instructions to name and change directories into your new project. You can then open it up in your favorite code editor and run either npm run dev or yarn dev to spin up the development server. To see the hot reloading in action, simply change the words Create Next App in pages/index.js to the name of your app and save the file.