How to Create a Node.js + Next.js Project | Express Backend + Next.js & React Frontend
ฝัง
- เผยแพร่เมื่อ 18 ก.ค. 2023
- 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 - วิทยาศาสตร์และเทคโนโลยี
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 !~
My man! Appreciate it bro - there were virtually no tutorials for express + next on TH-cam 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!
I'm half-way the video and i wanna say thank you many times. I love the tutorial.
Straight to the point with really good explaination!! Subscribed👍🏻
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! 🤗
Thanks for the video !!! This is what I need to kick-start my project, I love how you well explain every steps 👍
It helps lot understanding Client and Server running in nextjs. thank you Arpan.
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
Super exciting stuff, thanks for the clear tutorial!
I love this Video! Plz drop more brother. Thank you!
❤❤❤❤ thanks bro , that was really helpful for begin with it
Why is there only one video on this?
Next Frontend + Express Backend should be a very common configuration.
Thank you for this video, it is very helpful!
Nice one. Thanks
great tutorial! thank you so much.
gr8 video. keep up with the good work with more straight to the point videos like this.
My pleasure!
can i use nextauth for authentication and express for other functions
is there any method
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?
Thanks, very straightforward. The keyboard was a bit loud though.
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
will SSR works in this setup?
thanks bro it really help, hope you post other video like this! subscribed
How can we change the data coming from the api through frontend??
Thank you so much!
Now how to deploy it to vercel..?? With that backend server...like we do with vite app...
can u make tutorial video for a larger project utilizing prisma as ORM and mysql as the rdbms? thanks, appreciate it!
😢 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
Easy to understand, thank you
Glad to hear that!
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
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!
4:24 I am using windows, yet I was able to use the touch server.js command
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.
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.
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
Why you need it, if NextJs did serverless and every component is SSR now...?!
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.
you saved me bro
how to deploy it to 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.
thankgs bro
Bard just recommended this video, I didn't even ask for it :/
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.
How to access server on live deployment? PLEASE CREATE any short because I am stuck.
up! Did you manage to deploy?
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!
epic video man, but you missed one thing which is how to handle .env. anyway good effort
Great point!
how to deploy them under same domain name?
Same question!
Use vercel
ke xa sathi?
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.
but why?
Its not clear
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
Bro, keyboard noise is annoying
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 :)
"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"
}
}
😂
😏 *promosm*
ıt is not a ssr bro :)
You're right!
1k likes on me
without auth😢