How to Create a Node.js + Next.js Project | Express Backend + Next.js & React Frontend

Hey guys, wecome back. In this video, I wil show you guys how to set up a project with a Node.js backend and a Next.js & React frontend. We will set up a backend API using Express that returns data and fetch the data to display it on the frontend.
If you don't know what Node is, Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices. If you don't know what Express is, Express is a web framework for Node.js. It provides a robust set of features for building web applications, including routing, views, templates, and more.
If you don't know what React is, React is a JavaScript library for building user interfaces. It is maintained by Facebook and Instagram. React's declarative, efficient, and flexible nature make it an ideal choice for building user interfaces.
If you don't know what Next.js is, Next.js is a React framework for building modern web applications. It combines React with server-side rendering (SSR), static site generation (SSG), file-based routing, and built-in API routes. With Next.js, developers can create high-performance applications with simplified routing and serverless endpoints.
My Website: arpanneupane.com
My GitHub: github.com/arpanneupane19
Code in This Video: github.com/arpanneupane19/nex...
Additionally, if you need any or know anyone needing 3D renders/modeling, check out / trustytruss !
My Programming Gear:
Keyboard: amzn.to/42vXkxh
Laptop: amzn.to/3CkAP3W
Laptop Stand: amzn.to/3X116Oi
Desk: amzn.to/43wmIEt
Monitor: amzn.to/42BAaFH
Monitor Arm: amzn.to/3NR0APS
Chair: amzn.to/42vvKAn
Desk Mat/Mousepad: amzn.to/43AhKqj
Microphone: amzn.to/45RuQ43
Headphones: amzn.to/445sf4R
Official Express Documentation: expressjs.com/
Official React Documentation: reactjs.org/
Official Next.js Documentation: nextjs.org/docs
#Coding // #Node.js // #React // #LearnToCode

[@8bulletballers385]

My man! Appreciate it bro - there were virtually no tutorials for express + next on KZbin lol. The older videos from like 5 years ago showed that we needed to update some odd settings to enable expressjs and NextJS compatibility (instead of using NEXTJS’ built-in backend), but I guess next has built in support for express now. Appreciate it, Arpan!

[@ArpanNeupaneProductions]

Appreciate the comment!

[@venketesh6193]

I must say, this video is absolutely amazing. Thank You! 🤗

[@PrayRNGesus69]

Super exciting stuff, thanks for the clear tutorial!

[@aayushvaishnav5395]

Straight to the point with really good explaination!! Subscribed👍🏻

[@stefannikolovski9941]

Great explanation! Straight to the point with no bs. Maybe next vid can be explanation of how to deploy this same app to vercel, google cloud and/or another cloud platform

[@8bulletballers385]

I second this

[@user-me1bw8zk2j]

Yeah we need a video please, thing go crazy when setting the domain name and SSL

[@dreadnaught9226]

I'm half-way the video and i wanna say thank you many times. I love the tutorial.

[@kristine.wakeup]

Thanks for the video !!! This is what I need to kick-start my project, I love how you well explain every steps 👍

[@mepandian13]

I love this Video! Plz drop more brother. Thank you!

[@fantasticthree9048]

Really a great help as I'm a new user of this I faced so many error but with this I got over every of them. Thank you for your help, help us in the future !!

[@lingojulia]

Thank you for this video, it is very helpful!

[@kirang8541]

It helps lot understanding Client and Server running in nextjs. thank you Arpan.

[@godlyradmehr2004]

❤❤❤❤ thanks bro , that was really helpful for begin with it

[@bones1225]

Nice one. Thanks

[@robinsonzapata1]

great tutorial! thank you so much.

[@vrforyou3985]

Thank you so much!

[@ilanelhayani]

gr8 video. keep up with the good work with more straight to the point videos like this.

[@ArpanNeupaneProductions]

My pleasure!

[@pardboiled]

Thanks, very straightforward. The keyboard was a bit loud though.

[@agustinamazzeo5554]

Awesome video! Just a quick question, could you handle authentication with next-auth? How would that look like with an express backend?

[@johnnydoe6696]

Mostly the same way as with an app that is pure Next. Auth is handled by the next app, if not authorized, you do not/ cannot make calls to the backend. You would also want to pass any relevant session info to the backend I think.

[@HaroonCodes-fj8mp]

nicely explained thank you. but there is still some things I would like if you explain like how to handle API calls and manage state in complex applications ? should we use redux or any other thing for state management and state sharing. and also how to deploy both frontend and backend

[@MatiasGodoy-qb5cc]

Easy to understand, thank you

[@ArpanNeupaneProductions]

Glad to hear that!

[@ViolentAssassin]

can i use nextauth for authentication and express for other functions is there any method

[@alirad8996]

thank you so much for this amazing video, can we use the SSR feature of NextJS when we use the ExpressJS as backend????

[@ArpanNeupaneProductions]

Yes, absolutely

[@huseyinkaya418]

Okay, I really appreciate that for amazing video. But I really would like to know why we use Next.js? If we have only created client side component, we can just use pure React. If we need to create server side component, we can use next.js. Have I a wrong logic? Haven't I. I would like to learn

[@farrel_ra]

can u make tutorial video for a larger project utilizing prisma as ORM and mysql as the rdbms? thanks, appreciate it!

[@himankshu]

does it caches the data? or it works just like using react only?

[@saiyajin6075]

thankgs bro

[@danyala.1659]

Why is there only one video on this? Next Frontend + Express Backend should be a very common configuration.

[@omariyassinee]

Bard just recommended this video, I didn't even ask for it :/

[@PRANAVMAPPOLI]

will SSR works in this setup?

[@hellboy4642]

I want to learn nextjs . I just completed html and javascript, so should I learn react or nodejs or nexjs . Please help Will nextjs work without nodesjs

[@ArpanNeupaneProductions]

Yes it will.

[@rainbow3210]

please can someone help me? :( i have the next js project i want to start the backend using node js and for database mysql when i created my next js app i did not created server folder, now can i just create server folder and use it with my next js app or i need to do all the things again as step by step in the video?

[@Takatou__Yogiri]

so. we just create a next.js react project normally inside front end folder. and then create a server folder for backend and then install express. and they communicate with each other through API call. thank you so much.

[@markruzellmaray1077]

thanks bro it really help, hope you post other video like this! subscribed

[@armaanthakur8116]

How can we change the data coming from the api through frontend??

[@al-ft1ng]

How could one create an authentication system with a nextjs as client andd express as server project ? Like is there something to help us do that ? so that when requests are made to the server, the server knows to identify the user whos made that request ?

[@babajidebotoku7971]

Ive been thinking a lot of how to do this recently. Can do it with rwact but get stuck with next 13

[@danielpalumbo2134]

i guess you could use jwt? Make the backend send a jwt token in login, and send the jwt to the backend from the client with every request that needs validation? Such as show a profile, etc. If the jwt token is not valid, you could send an error and manage that error from next

[@danielpalumbo2134]

i think "boom" is a library that helps you manage errors in the backend, you could use that to help yourself manage errors if it's too much. And later try understanding and create your own errors. I hope that this is some help to you. Sorry if i'm saying something obvious for you and that you may have tried already

[@saimarshadd]

@al-ft1ng did you find out how to do it??? Also how would you make your client side pages protected like if there is no user then show login/signup page if there is redirect them to home page. How to do this somebody help

[@ArpanNeupaneProductions]

Hello, apologies for the late response. You can use authentication providers like Auth0 and use token authentication on the NextJS frontend. You can then send that same token to the backend (in Express) to authenticate requests.

[@curiously-cinnamon]

Hey Arpan, I'm using Windows, and I was following along just fine until 14:04 . For me, there is a squiggly red line under useEffect , and at 15:33 , there is a red line under useState. But the code still works. When I hover my mouse over useEffect, it says "React Hook "useEffect" is called in function "index" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use"." And when I hover my mouse over useState, it shows a similar message "React Hook "useState" is called in function "index" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use"." How should I proceed?

[@richardohana8898]

It depends on what you called your functional component in React. Components should not start with "use" as that is a keyword used in React specifically for hooks (such as useEffect and useState). Components should also begin with a capital letter. Following those two conventions should solve your problem.

[@abhijayrajvansh]

epic video man, but you missed one thing which is how to handle .env. anyway good effort

[@ArpanNeupaneProductions]

Great point!

[@curiously-cinnamon]

4:24 I am using windows, yet I was able to use the touch server.js command

[@JALESnotJAQUE]

😢 my question after watiching the video is still what is the server for when next js runs one for you on port 3000 are they different i know they different i just can't make sense why 💀we making it to the interview with this one

[@flashz1]

Why you need it, if NextJs did serverless and every component is SSR now...?!

[@aliawj9166]

how to deploy it to vercel

[@narsaabg]

How to access server on live deployment? PLEASE CREATE any short because I am stuck.

[@deerp6497]

up! Did you manage to deploy?

[@anishkarthik4309]

how to deploy them under same domain name?

[@armaanthakur8116]

Same question!

[@lollool6330]

Use vercel

[@johnly808]

gotta know what keyboard your using.

[@ArpanNeupaneProductions]

Link to purchase it is in the description!

[@sunnysetia]

@@ArpanNeupaneProductions which switch? I have brown switch but it doesn't sound like yours?

[@ArpanNeupaneProductions]

@@sunnysetia I am using red switches.

[@indimerz]

I thought we write backend code into nextjs project, as people call it is a full stack framework. Please correct me.

[@ArpanNeupaneProductions]

It is possible, and that is what NextJS is good for. However, there are developers who prefer the frontend capabilities of NextJS but prefer the backend of another framework. This video is useful for those folks!

[@indimerz]

@@ArpanNeupaneProductions what's the preferred way of doing it? I'm going to switch to next js, RN I know react, node express mongo. I use MVC pattern for backend. Which one used mostly in companies

[@ArpanNeupaneProductions]

@@indimerz Preference is up to you and what you’re most comfortable with!

[@bigyanacharya9700]

Arpan neuapne bro, are you nepali?

[@ArpanNeupaneProductions]

Yes

[@bigyanacharya9700]

@@ArpanNeupaneProductions how did you get that accent bro? I was shocked after i saw the surname. Can i get your insta, happy to see nepali devs.

[@ArpanNeupaneProductions]

@@bigyanacharya9700 I grew up in America 😂. Sure, here is my account: arpann777

[@idris236]

Suggestion: Thanks for taking the time to share your knowledge. Please don’t record the keyboard typing audio in video. Can barely make it past 2 mins the sound is so annoying. I think it would improve the video; nobody wants to hear you typing.

[@ArpanNeupaneProductions]

My more recent videos have a quieter keyboard :)

[@TabuHana]

but why?

[@fidelpeters8322]

😏 *promosm*

[@fabienpineau1580]

Bro, keyboard noise is annoying

[@che5738]

"npm run dev" not working npm ERR! Missing script: "dev" this is package.json, { "name": "park-ease", "version": "0.1.0", "private": true, "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "node server", "dev": "nodemon server" }, "dependencies": { "react": "^18", "react-dom": "^18", "next": "14.2.3" }, "devDependencies": { "typescript": "^5", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8", "tailwindcss": "^3.4.1", "eslint": "^8", "eslint-config-next": "14.2.3" } }

[@hemanthnekkanti3450]

Its not clear

[@syuo5051]

1k likes on me

[@ozgurdarendeli6571]

ıt is not a ssr bro :)

[@ArpanNeupaneProductions]

You're right!

[@takedownccp]

without auth😢