How to Create a Node.js + Next.js Project | Express Backend + Next.js & React Frontend
HTML-код
- Опубликовано: 8 янв 2025
- 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/arp...
Code in This Video: github.com/arp...
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
My man! Appreciate it bro - there were virtually no tutorials for express + next on RUclips 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!
Appreciate the comment!
Hey Arpan!
I'm a frontend Developer trying to be the full stack developer.
This 20 min video exactly includes what I want.
It helped me to reduce so much time for me and I"m really thankful.
Wish you the best luck !
Sending a huge support from Korea !~
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
I second this
Yeah we need a video please, thing go crazy when setting the domain name and SSL
Yes sir please do that
I'm half-way the video and i wanna say thank you many times. I love the tutorial.
This is awesome. Enjoyed it to the fullest. Thanks bro
Straight to the point with really good explaination!! Subscribed👍🏻
Why is there only one video on this?
Next Frontend + Express Backend should be a very common configuration.
Yes i wonder why
Literally...
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 !!
I must say, this video is absolutely amazing. Thank You! 🤗
Super exciting stuff, thanks for the clear tutorial!
I love this Video! Plz drop more brother. Thank you!
gr8 video. keep up with the good work with more straight to the point videos like this.
My pleasure!
Thanks for the video !!! This is what I need to kick-start my project, I love how you well explain every steps 👍
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.
Thank you, first step in backend
❤❤❤❤ thanks bro , that was really helpful for begin with it
Great tutorial brother, thanks a lot
So good and straight to the point
Bro 🎉 you just earned a new subscriber
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
Great Explaination
4:24 I am using windows, yet I was able to use the touch server.js command
can u make tutorial video for a larger project utilizing prisma as ORM and mysql as the rdbms? thanks, appreciate it!
Thank you for this video, it is very helpful!
It helps lot understanding Client and Server running in nextjs. thank you Arpan.
Thanks, it's very helpful
Hi when you create a new react project the nextjs is inside the project correct? Then how can I implement rest api like connecting to mysql for react to do CRUD operations?
Thanks, very straightforward. The keyboard was a bit loud though.
thanks bro it really help, hope you post other video like this! subscribed
Awesome video! Just a quick question, could you handle authentication with next-auth? How would that look like with an express backend?
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.
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?
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.
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
did u get the reason
I want to know that to.
Hello to all ! I have worked as Fullstack and use express and next daily btw. I just want to know what is the main goal in here. But as I know, just creating client components doesnt make you next.js developer or you cannot make best practices on next.js. If you use "use client" top of every single file and make it client, it is wrong. Just have to divide and make your mind to create server component and after that give client component as a child. Maybe here in video they just want to share how to combine two techs and doesnt focus on best usage scenearios. So if your app or logic doesnt contain server minded-advantages of next(Seo, speed, cache, SSR, server actions) dont use nextjs.
Easy to understand, thank you
Glad to hear that!
Hi !
I like how you explain so concisely, I watched the node + react video and It was really helpful!
But I'm new to web dev and I still have some confusions that I wish to clear :
Is Next.js the same as Express.js, like do they do the same thing? in other words do they have like the same spot/role in a web stack?
Thank you !
Thank you! Next.js is not the same as Express.js.
Nice one. Thanks
great tutorial! thank you so much.
Bard just recommended this video, I didn't even ask for it :/
thank you so much for this amazing video, can we use the SSR feature of NextJS when we use the ExpressJS as backend????
Yes, absolutely
can i use nextauth for authentication and express for other functions
is there any method
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 ?
Ive been thinking a lot of how to do this recently. Can do it with rwact but get stuck with next 13
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
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
@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
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.
Now how to deploy it to vercel..?? With that backend server...like we do with vite app...
does it caches the data? or it works just like using react only?
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?
how to deploy them under same domain name?
Same question!
Use vercel
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
Yes it will.
😢 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
epic video man, but you missed one thing which is how to handle .env. anyway good effort
Great point!
I need this to use express as my file storage system since I do not want to use Azure or AWS. This approach has an issue due to CORS that basically lets your server serve anyone that performs a request from it, so suppose you make an imdb clone and you set up all your API endpoints in express, all I'd have to do is use your app once and with the help of the browser inspection tool I can get these end points and build my own frontend over them so I'd be basically ripping you off. If anyone has a counter approach please reply, this issue is bugging me!
Thank you so much!
will SSR works in this setup?
How can we change the data coming from the api through frontend??
How to access server on live deployment? PLEASE CREATE any short because I am stuck.
up! Did you manage to deploy?
Why you need it, if NextJs did serverless and every component is SSR now...?!
gotta know what keyboard your using.
Link to purchase it is in the description!
@@ArpanNeupaneProductions which switch? I have brown switch but it doesn't sound like yours?
@@sunnysetia I am using red switches.
I thought we write backend code into nextjs project, as people call it is a full stack framework. Please correct me.
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!
@@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
@@indimerz Preference is up to you and what you’re most comfortable with!
you saved me bro
how to deploy it to vercel
ke xa sathi?
Arpan neuapne bro, are you nepali?
Yes
@@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.
@@bigyanacharya9700 I grew up in America 😂. Sure, here is my account: arpann777
Thank you.
problem comes when you want to setup a cookie for auth
thankgs bro
"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"
}
}
😂
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.
My more recent videos have a quieter keyboard :)
but why?
Its not clear
1k likes on me
ıt is not a ssr bro :)
You're right!
😏 *promosm*
Bro, keyboard noise is annoying