React Series #03: How to run a node project & understand the structure

How to run a node project is a simple command. Go to the terminal section in your VSCode and run this command

npm run dev

The project by default will run in 3000 port. and you can access your project from http://localhost:3000/ In my case, I already running another project, so the new project will run in the next port number which is 3001 port. This means you can run any number of projects from your machine.

Understand the basic structure of a Next.js Project

List all the folders and files

ls -1

README.md
app
components
components.json
jsconfig.json
lib
next.config.mjs
node_modules
package-lock.json
package.json
postcss.config.mjs
public
tailwind.config.js

All your working files will be in “app” folder.

All the UI components will be in “components“.

All the images are in “public” folder.

next.config.mjs: Has the next.js main config files, any change that you make in the config file will restart the application

tailwind.config.js: tailwind config file, you can edit the primary color for a project in this file

ls -1 app

favicon.ico
globals.css
layout.js
page.js

layout.js: This is the primary file where the project starts. The HTML start tag and end Tag is here. This page has the page title and description and keywords. Any section will be called here to render the page.

page.js This file has the main body content.

Understanding this structure is very important to construct the react page components.