Тёмный
No video :(

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

Arpan Neupane
Подписаться 12 тыс.
Просмотров 62 тыс.
50% 1

Опубликовано:

 

25 авг 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 93   
@srtktx
@srtktx Месяц назад
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 !~
@danyala.1659
@danyala.1659 2 месяца назад
Why is there only one video on this? Next Frontend + Express Backend should be a very common configuration.
@stefannikolovski9941
@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
@8bulletballers385 Год назад
I second this
@user-me1bw8zk2j
@user-me1bw8zk2j 6 месяцев назад
Yeah we need a video please, thing go crazy when setting the domain name and SSL
@8bulletballers385
@8bulletballers385 Год назад
My man! Appreciate it bro - there were virtually no tutorials for express + next on RU-vid 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
@ArpanNeupaneProductions Год назад
Appreciate the comment!
@dreadnaught9226
@dreadnaught9226 3 месяца назад
I'm half-way the video and i wanna say thank you many times. I love the tutorial.
@aayushvaishnav5395
@aayushvaishnav5395 10 месяцев назад
Straight to the point with really good explaination!! Subscribed👍🏻
@fantasticthree9048
@fantasticthree9048 3 месяца назад
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 !!
@PrayRNGesus69
@PrayRNGesus69 11 месяцев назад
Super exciting stuff, thanks for the clear tutorial!
@DuyentheNomad
@DuyentheNomad 4 месяца назад
Thanks for the video !!! This is what I need to kick-start my project, I love how you well explain every steps 👍
@venketesh6193
@venketesh6193 11 месяцев назад
I must say, this video is absolutely amazing. Thank You! 🤗
@kirang8541
@kirang8541 4 месяца назад
It helps lot understanding Client and Server running in nextjs. thank you Arpan.
@mepandian13
@mepandian13 6 месяцев назад
I love this Video! Plz drop more brother. Thank you!
@Jimicode
@Jimicode 29 дней назад
Bro 🎉 you just earned a new subscriber
@godlyradmehr2004
@godlyradmehr2004 8 месяцев назад
❤❤❤❤ thanks bro , that was really helpful for begin with it
@pardboiled
@pardboiled 4 месяца назад
Thanks, very straightforward. The keyboard was a bit loud though.
@ilanelhayani
@ilanelhayani 4 месяца назад
gr8 video. keep up with the good work with more straight to the point videos like this.
@ArpanNeupaneProductions
@ArpanNeupaneProductions 2 месяца назад
My pleasure!
@lingojulia
@lingojulia 11 месяцев назад
Thank you for this video, it is very helpful!
@omariyassinee
@omariyassinee 11 месяцев назад
Bard just recommended this video, I didn't even ask for it :/
@huseyinkaya418
@huseyinkaya418 7 месяцев назад
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
@HaroonCodes-fj8mp
@HaroonCodes-fj8mp 5 месяцев назад
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
@weixiangng8279
@weixiangng8279 Месяц назад
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?
@MatiasGodoy-qb5cc
@MatiasGodoy-qb5cc 4 месяца назад
Easy to understand, thank you
@ArpanNeupaneProductions
@ArpanNeupaneProductions 2 месяца назад
Glad to hear that!
@farrel_ra
@farrel_ra 4 месяца назад
can u make tutorial video for a larger project utilizing prisma as ORM and mysql as the rdbms? thanks, appreciate it!
@alamjamal4011
@alamjamal4011 Месяц назад
you saved me bro
@bones1225
@bones1225 11 месяцев назад
Nice one. Thanks
@robinsonzapata1
@robinsonzapata1 10 месяцев назад
great tutorial! thank you so much.
@vrforyou3985
@vrforyou3985 11 месяцев назад
Thank you so much!
@SanjayNG125
@SanjayNG125 Месяц назад
Now how to deploy it to vercel..?? With that backend server...like we do with vite app...
@curiously-cinnamon
@curiously-cinnamon 11 месяцев назад
4:24 I am using windows, yet I was able to use the touch server.js command
@Takatou__Yogiri
@Takatou__Yogiri 4 месяца назад
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.
@agustinamazzeo5554
@agustinamazzeo5554 11 месяцев назад
Awesome video! Just a quick question, could you handle authentication with next-auth? How would that look like with an express backend?
@johnnydoe6696
@johnnydoe6696 8 месяцев назад
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.
@nullpointer7809
@nullpointer7809 Месяц назад
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!
@al-ft1ng
@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
@babajidebotoku7971 Год назад
Ive been thinking a lot of how to do this recently. Can do it with rwact but get stuck with next 13
@danielpalumbo2134
@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
@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
@saimarshadd 11 месяцев назад
@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
@ArpanNeupaneProductions 9 месяцев назад
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.
@alirad8996
@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
@ArpanNeupaneProductions Год назад
Yes, absolutely
@ViolentAssassin
@ViolentAssassin 6 месяцев назад
can i use nextauth for authentication and express for other functions is there any method
@markruzellmaray1077
@markruzellmaray1077 3 месяца назад
thanks bro it really help, hope you post other video like this! subscribed
@rainbow3210
@rainbow3210 3 месяца назад
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?
@himankshu
@himankshu 4 месяца назад
does it caches the data? or it works just like using react only?
@anishkarthik4309
@anishkarthik4309 10 месяцев назад
how to deploy them under same domain name?
@armaanthakur8116
@armaanthakur8116 6 месяцев назад
Same question!
@lollool6330
@lollool6330 3 месяца назад
Use vercel
@abhijayrajvansh
@abhijayrajvansh 4 месяца назад
epic video man, but you missed one thing which is how to handle .env. anyway good effort
@ArpanNeupaneProductions
@ArpanNeupaneProductions 2 месяца назад
Great point!
@hellboy4642
@hellboy4642 11 месяцев назад
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
@ArpanNeupaneProductions 9 месяцев назад
Yes it will.
@JALESnotJAQUE
@JALESnotJAQUE 4 месяца назад
😢 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
@armaanthakur8116
@armaanthakur8116 6 месяцев назад
How can we change the data coming from the api through frontend??
@PRANAVMAPPOLI
@PRANAVMAPPOLI 8 месяцев назад
will SSR works in this setup?
@saiyajin6075
@saiyajin6075 Год назад
thankgs bro
@flashz1
@flashz1 9 месяцев назад
Why you need it, if NextJs did serverless and every component is SSR now...?!
@curiously-cinnamon
@curiously-cinnamon 11 месяцев назад
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
@richardohana8898 10 месяцев назад
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.
@shashankthapa659
@shashankthapa659 Месяц назад
ke xa sathi?
@aliawj9166
@aliawj9166 8 месяцев назад
how to deploy it to vercel
@indimerz
@indimerz 7 месяцев назад
I thought we write backend code into nextjs project, as people call it is a full stack framework. Please correct me.
@ArpanNeupaneProductions
@ArpanNeupaneProductions 7 месяцев назад
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
@indimerz 7 месяцев назад
@@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
@ArpanNeupaneProductions 7 месяцев назад
@@indimerz Preference is up to you and what you’re most comfortable with!
@narsaabg
@narsaabg Год назад
How to access server on live deployment? PLEASE CREATE any short because I am stuck.
@deerp6497
@deerp6497 11 месяцев назад
up! Did you manage to deploy?
@johnly808
@johnly808 Год назад
gotta know what keyboard your using.
@ArpanNeupaneProductions
@ArpanNeupaneProductions Год назад
Link to purchase it is in the description!
@sunnysetia
@sunnysetia 10 месяцев назад
@@ArpanNeupaneProductions which switch? I have brown switch but it doesn't sound like yours?
@ArpanNeupaneProductions
@ArpanNeupaneProductions 9 месяцев назад
@@sunnysetia I am using red switches.
@fabienpineau1580
@fabienpineau1580 4 месяца назад
Bro, keyboard noise is annoying
@idris236
@idris236 4 месяца назад
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
@ArpanNeupaneProductions 2 месяца назад
My more recent videos have a quieter keyboard :)
@TabuHana
@TabuHana 8 месяцев назад
but why?
@bigyanacharya9700
@bigyanacharya9700 9 месяцев назад
Arpan neuapne bro, are you nepali?
@ArpanNeupaneProductions
@ArpanNeupaneProductions 9 месяцев назад
Yes
@bigyanacharya9700
@bigyanacharya9700 9 месяцев назад
@@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
@ArpanNeupaneProductions 9 месяцев назад
@@bigyanacharya9700 I grew up in America 😂. Sure, here is my account: arpann777
@hemanthnekkanti3450
@hemanthnekkanti3450 8 месяцев назад
Its not clear
@che5738
@che5738 2 месяца назад
"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" } }
@Superuser-r1y
@Superuser-r1y Месяц назад
😂
@ozgurdarendeli6571
@ozgurdarendeli6571 3 месяца назад
ıt is not a ssr bro :)
@ArpanNeupaneProductions
@ArpanNeupaneProductions 2 месяца назад
You're right!
@fidelpeters8322
@fidelpeters8322 Год назад
😏 *promosm*
@syuo5051
@syuo5051 2 месяца назад
1k likes on me
@takedownccp
@takedownccp 8 месяцев назад
without auth😢
Далее
Next.js with a separate server - good idea?
22:53
Просмотров 58 тыс.
What Theo Won't Tell You About Next.js
8:37
Просмотров 87 тыс.
You don't need a frontend framework
15:45
Просмотров 120 тыс.
What is Postman and why everyone use it ?
28:33
Просмотров 25 тыс.
Why I'm Using Express Instead of NextJS
5:23
Просмотров 108 тыс.
Fetching Data Doesn't Get Better Than This
6:58
Просмотров 110 тыс.
Theo Browne: Next.js is a backend framework
11:44
Просмотров 155 тыс.
NVIDIA Needs to STOP
11:35
Просмотров 982 тыс.
Node.js Crash Course
2:06:35
Просмотров 156 тыс.