DEV Community

Cover image for Setting Up a ReactJs and Nextjs Project
Balvinder Singh
Balvinder Singh

Posted on • Originally published at tekraze.com

Setting Up a ReactJs and Nextjs Project

Introduction to Setting up a ReactJS project

In this blog post, we’ll guide you through the process of setting up a new React and NextJS project. We’ll cover the essential steps involved, including creating a project, installing dependencies, and running the development server. Please also check previous post where we explained about React Basics and NextJS Framework from the link below.

React Basics and NextJS Framework

Prerequisites for setting up ReactJS Project

Before we begin, ensure you have the following tools installed for starting ReactJS project:

Git Version Control

Git Setup Prompt Window

A version control system used for tracking changes to your code. By default, it will create a master/main branch project to track changes to your code. It also helps you to keep track of changes during your development, you can restore any changes, discard changes and even test different versions without messing up the code. Also, you will be getting additional knowledge as most of the companies use Git for code management, and is an essential skill for your resume.

Download Link for Git

We are using Windows for our project, but you can also use Linux. Choose the download accordingly for all requirements we share next.

Node.js and NPM

Prompt Window for NodeJS Software Installation

Node.js is a JavaScript runtime environment that is used to run your code, do application build and compile scripts. It also provides some compiler dependencies we need for executing ReactJS code. You can download any of the LTS version available.

Along with NodeJS, we get NPM which is the package manager for Node.js. With NPM you can install dependencies to your project like Axios for making API calls, Chakra UI for UI components and theming, DatePicker for adding date inputs and much more.

Both are essential for working with React and Next.js projects. There is only single installation required for both NodeJS and NPM

Download Link for NodeJS LTS 20

You can check installation success with Commands below to test versions as well.

PS C:\Users\balvi> node -v
v20.9.0
PS C:\Users\balvi> npm -v
10.1.0

VS Code Editor

What can be better to learn JavaScript with a JavaScript based IDE built using electron. A popular code editor that provides excellent support for JavaScript development, including React and Next.js. You can get it from the Microsoft website and also enjoy various extensions available for the VS Code.

Download Link for VS Code

We mention VS Code as Editor because it needs extensions to work, so it is lightweight by Default. Eclipse or IntelliJ Idea on another side is a fully integrated Development environment but for heavy use. So, they are known as IDE and not editor.

Terminal/Powershell

For most of the tutorial we will be using the terminal. You can also use that or if you don’t have terminal in your windows, then you can use PowerShell as well. For Linux terminal will be available, so feel free to use that.

Creating a New React Project

Follow the below steps to start with a React based Application. You also have options to start with different templates such as Typescript Project, Typescript with Redux Project or just plain old JavaScript. We will use the default one for this. Irrespective of the templates, it will be same. Just a few differences how you define variables and its types with Typescript, whereas JavaScript doesn’t even care until you run and get an error. Thats why dev now a days prefer Typescript to be safe from unexpected errors with type safety. Example you can declare a variable as string if you expect text.

Note: Check Official ReactJS Docs for Custom Template Usage

1. Install Create React App (CRA)

Create React App (CRA) is a tool that simplifies the process of setting up a new ReactJS project. It provides a pre-configured environment with all the necessary dependencies and tools.

npm install -g create-react-app

2. Create a new project

npx create-react-app my-react-app

If you get any execution error for script related error, then execute below command in terminal/powershell for windows

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

Also, if you get any error related to ERR_SSL_CIPHER_OPERATION_FAILED, then execute below command in terminal.

npm cache clear –force

These are the errors we faced in windows, but on Linux there might be no issues. Still feel free to comment if you face any issues. We will help to solve it in comments as well or update the solution in article itself. Thanks.

3. Navigate to the project directory

With below command you can change to directory where you created project files. Use the same name as the previous step if you have named it differently.

cd my-react-app

4. Start the development server

Now that you have everything ready, you can start the application and can access development version locally in your browser. Just keep the command running in the Terminal/Powershell and don’t close unless you want to kill the dev server. Closing will also make the application down, and when you are done with, you can turn it down.

npm start

Output of ReactJS in Development

You can navigate to address http://localhost:3000 to check the project. If you see image same as above then congrats you finally created a ReactJs project. Let’s move to NextJS Project creation.

Creating a New Next.js Project

Next.js is a popular React framework that provides features like server-side rendering (SSR) and static site generation (SSG). It simplifies the process of building fullstack React applications. A few steps will be the same as above ReactJS project, so we will keep it short.

1. Install Next.js

You need to run following command to install dependency for creating a next project.

npm install -g next

2. Create a new project

Enter below command to start creating NextJS Project. Same way select a name for your project.

npx create-next-app my-next-app

For most of the questions, you can answer yes as they will add helpful configurations and integration for the project. You can select typescript for this or choose no if you just need to use javascript. But we recommend using typescript with NextJS as you can expect what you will get from the declarations and functions in NextJS.

NextJS project creation screen

With these selections it will install ReactJS dependencies, so yes, you can do use same features of React along with Functionalities provided by Next as a bonus. You also get option to use Tailwind CSS which is a modern CSS framework and gives you pretty nice design from the start without any effort.

As we have selected Typescript, we also get Types package, along with ESLint for linting issues such as spacing, formatting, clean up etc basic code cleanup tasks to make it beautiful and structured well. In short, does the cleaning up for you and keeps code in check for any standards we need.

PostCSS is just a CSS preprocessor for processing and optimizing Sass/CSS files.

3. Navigate to the project directory

Now enter below command to change the project directory and for running the code.

cd my-next-app

4. Start the development server

Enter the below command to run Next Project. You might have noticed that its different from the above React project because both have different structure accordingly as well tools, and scripts. So next project runs with different scripts and need a different command.

npm run dev

Open the address http://localhost:3000 to open the application in your browser. If you see the below output then congrats, you have successfully generated the NextJS project.

Output of NextJS development screen

Project Structure of ReactJS and NextJS

Both React and Next.js projects follow a similar structure:

  • src: Contains the source code for your application. Most of the code related to pages, components go here as its the root and we use it for importing files relatively as well modules/packages.
    public: Contains static assets like images and favicons. Also the Stylesheets for CSS.

  • package.json: Describes your project’s dependencies and scripts. You can configure the project name, license, author info, git repo link as well the scripts you might need other than the default.

  • node_modules: Stores the installed dependencies. Its a big folder containing all your installed dependencies. It exists only while deployment and in production, we don’t use that. You also need to make sure to ignore node modules folder with git ignore.

There might be other config files for the custom dependencies you install later like postcss or ESLint config. You can edit these files to change the config as per need of the project. It can be customized anytime but recommended to set at the start to avoid any additional work later.

Installing Dependencies

You may need to install additional dependencies based on your project requirements. For example, to install a state management library like Redux, you can use:

cd my-react-app 
npm install redux react-redux
Enter fullscreen mode Exit fullscreen mode

Same way you can install any additional library you need from NPM repository by replacing dependency name like axios,react-redux, moment etc.

If there are dependency conflicts for peer dependency, you can force dependency.

npm install axios –legacy-peer-deps

This will ignore version mismatch issue and let you install a package. You can also mention a version like this:

npm install axios@4
npm install axios@4.2.1
Enter fullscreen mode Exit fullscreen mode

The first version of the command will install the latest version under 4 or the version specified, and the other command will do the subversions under main version 4.

You can check and find dependencies on the NPM official site.

Browse NPM Packages on NPM Repo

In programming, especially in projects, we do use following syntax like 1.0.0 where the first denotes the major change when we have something different from the existing functionality. Second denotes a small change to the existing functionality and the third one shows a minor change or usually the fix to the issues.

So, 1.0.0 is usually the starting version, whereas 2.3.4 can denote, it’s a 2nd major version of the software with minor additions as well fixes to some features. This type of versioning helps dev to avoid issues with incompatible dependencies, as well avoiding missing functionality in updated dependency versions.

Running the Development Server

Once you’ve created your project and installed dependencies, you can start the development server to view your application. The development server provides features like hot module replacement, which allows you to see changes to your code reflected in the browser without having to refresh the page.

Hot Module replacement is a process with which you dont need to close and run project again, as the code changes are detected automatically and the new code is available. Sometimes we have the browser sync as well, that refreshes the browser as well. But you can also manually refresh to update the page, once you make changes, without closing the running command.

Additional Tips to Explore on your own

  • Use a code editor or IDE: A good code editor or integrated development environment (IDE) can greatly enhance your development experience. Popular choices include Visual Studio Code, WebStorm, and Sublime Text.

  • Utilize version control: Use a version control system like Git to track changes to your code and collaborate with others.

-Explore the documentation: Both React and Next.js have extensive documentation that can be a valuable resource for learning more about their features and best practices.

  • Consider using a linter: A linter can help you catch potential errors and enforce coding standards in your project. Popular linters for JavaScript include ESLint and Prettier.

  • Set up a task runner: A task runner like Webpack or Parcel can automate common development tasks, such as bundling your code and optimizing assets.

  • Install a CSS preprocessor: A CSS preprocessor like Sass or Less can improve your CSS workflow by adding features like variables, nesting, and mixins.

By following these steps and incorporating the additional tips, you’ll be well on your way to setting up a solid foundation for your React and Next.js project.

Summary

In this blog post, we’ve covered the basic steps involved in setting up a React and Next.js project. By following these steps, you’ll have a solid foundation to start building your web application. In the next post, we’ll delve deeper into understanding components and JSX. We will keep posting more articles in this series, so stay connected. Thanks for reading.

Originally published at https://tekraze.com/setting-up-reactjs-nextjs-project/

Top comments (0)