Next.js is a React framework that ships with all the features you need for production. It gives you the best developer experience because it comes with several functionalities that would have been installed and handled on your own in a "vanilla" React app. In this guide, I will introduce you to Next.js by first explaining what Next is and why use such a tool, and then create a basic app with it.
Let's dive in.
Sorry for the interrupt!
If you're interested in learning React or Next.js in a comprehensive way, I highly recommend these bestseller courses:
> Complete Next.js with React & Node - Beautiful Portfolio App
> React - The Complete Guide (incl Hooks, React Router, Redux)
What is Next.js?
Next.js is a framework built with React, Node.js, Babel, and Webpack. It comes by default with handy features that are not available in a "vanilla" React App.
Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.
Next.js enables routing in your app by using the file-system-based routing. It will automatically use files located on the
pages folder as a route, meaning that you even do not need to add an extra library to build a Multi-pages app with Next.
The Next.js framework provides a straightforward solution to build your API using API routes. You can build your entire API with GraphQL, Express, or your favorite framework and then connect it to a database using API routes. Next.js treats files under the
pages/api directory as API endpoints.
Unlike React, Next has built-in support for Styled JSX, Sass, CSS modules, and more, which make Next.js app easy to style.
Creating a Next app
A Next.js app can be created manually or with Create Next App. We will go for the latter because it is the recommended way, and it will set up everything automatically for us.
So, open you your command-line interface (CLI) and run this following command:
npx create-next-app my-app
Once the project is created, let's now explore the file structure:
├── pages | ├── api | | └── hello.js | ├── index.js | └── _app.js ├── styles | ├── globals.css | └── Home.module.css ├── package.json └── yarn.lock ├── README.md
As I mentioned earlier, Next.js uses the file system to enable routing in the app. Here, the
index.js file is the Home page of the project. If you add a new file in the
pages folder, it will be treated as a route.
Create Next App comes by default with the
api folder, meaning that the
hello.js file is an API endpoint. If you hit the API route
http://localhost:3000/api/hello, you will get a response from the server.
Next.js uses the App component to initialize pages. The
_app.js file allows you to override the default behavior of the component. If you have global styles or data that need to be sharing across your components, put them here. By the way, the underscore symbol (
_) tells Next.js to not using the file as a route.
With this in place, we can now preview the project by running this command on the terminal:
npm run dev
Let's visit on the browser
Great! We have now finished with the introduction to Next.js. We will dive into Next.js static and dynamic routing in the next part of the series.
Thanks for reading, and see you next.