Everyone is using React these days. We might as well join them 😅. React is a powerful JavaScript library for building scalable user interfaces. It was created by Facebook and released in 2013. React was introduced to JavaScript to address the challenges of building complex user interfaces.
You see, traditional approaches to building UIs heavily relied on manipulating the DOM directly, this would usually result in slow and error-prone apps and websites.
With React, you can build UIs using a component-based architecture, where each component represents a small piece of the UI that can be easily reused and combined with other components. You can also take advantage of a large ecosystem of third-party libraries and tools that allows you to build powerful applications quickly and efficiently.
Using React is even more exciting with the release of the new React documentation. If you want to create a website or app fully with React, they recommend that you use one of the react frameworks – Next.js, Remix, Gatsby, and Expo (for native apps). In this tutorial, we will explore how to create a new React project using the Next.js Framework.
Benefits of Using React with Next.js
React and Next.js can be used together to create high-performance, server-side rendered applications – Next.js is a framework built on top of React that adds additional features and functionality to your React projects.
It allows you to create both static and dynamic pages, making it easy to build powerful and scalable applications. With Next.js, you can take advantage of server-side rendering, making your applications faster and more responsive.
Next.js provides a simplified routing system that makes it easy to navigate between pages. This can help improve the user experience and make it easier for users to find what they're looking for.
Next.js can automatically split code into smaller chunks, making it faster and easier to load. This can improve the performance of your application and reduce the time required to load the pages.
Next.js improves development experience with features like hot reloading, which allows developers to see changes in real-time without having to restart the server.
Let me show you how to get started in just 3 steps!
Setting up your Reactjs and Next.js App
Step 1: Install Node.js and npm
Before starting a new React project with Next.js, you need to have the latest version of Node.js and npm (Node Package Manager) installed on your system. Node.js is a JavaScript runtime that allows you to run JavaScript code outside of a web browser. npm is a package manager that helps you install and manage packages (libraries, frameworks, etc.) for your Node.js projects.
To install Node.js and npm, follow the instructions on the official Node.js website – Nodejs Installation
Step 2: Create a New React Project with Next.js
Once you have Node.js and npm installed, you can create a new React project with Next.js using the create-next-app command-line tool. This tool helps you set up a new React project with all the necessary files and dependencies.
To create a new React project with Next.js, open your terminal or command prompt, cd into the folder you want to save your new react app and run the following command –
_npx create-next-app@latest my-app
or
yarn create next-app my-app
or
pnpm create next-app my-app_
You do not need to create an empty directory. The create-next-app command will create one for you. Replace my-app with the name of your project.
This command will create a new directory with the name of your project and set up a new React project with Next.js inside it. If you forget to write your app name don't worry, Next will prompt you to add your app name. During installation you will get these prompts –
? Would you like to use TypeScript with this project? … No / Yes
? Would you like to use ESLint with this project? … No / Yes
? Would you like to use `src/` directory with this project? … No / Yes
? Would you like to use experimental `app/` directory with this project? › No / Yes
? Would you like to use experimental `app/` directory with this project? … No / Yes
Choose any that applies to you – use your left and right arrow keys to choose between yes and no – and press enter. Installation time is usually based on your machine, be patient 😊.
After installation, your react-next project folder should've been created. cd into your project folder, then type ‘code .’ – this should open vscode automatically.
If your vscode does not open automatically, that means you do not have the shell command code installed on your vscode. To get it installed,
- open vscode,
- hold cmd - shift - p on your keyboard (this opens the command palette)
- type Shell Command: Install ‘code’ command in PATH
- press enter.
This would install code in your terminal – the ‘code .’ command should work now.
Step 3: Run the Development Server
After creating a new React project with Next.js, you can start the development server using the following command:
npm run dev
You can run this command directly in your vscode terminal. This command compiles the code and runs the development server.
It will hot reload and fast refresh the code so everytime you hit save, the page will automatically reload. Your server should be running on localhost:3000 in your web browser.
Congratulations, your react-next app is ready! 😁
Let’s explore the project structure
Once the development server is running, you can explore the project structure.
Package.json
The package.json file is a configuration file that contains important metadata about your project, as well as information about its dependencies.
Styles
The style directory contains all the CSS styles for your project.
Public
The public directory contains the static assets (favicons, fonts, images, etc.) for your project.
Pages
The pages directory contains the API directory – for your backend connections, and all the pages for your React project.
See how easy that was! 😌😄
Check out Next.js documentation to learn more on how to use Next.js
Happy coding! ♥️ ♥️ ♥️
Top comments (1)
A while ago I wrote this article about using Next.js, React and Sanity.io (a headless CMS) to build our blog.
Great article Sarah, here is what we wrote at the time: polipo.io/blog/how-we-built-this-b...
Interesting?