Build A Contact Us Page with Next.js 13, MongoDB, and Tailwind CSS

Check out my courses: gtcoding.net/c...
Hi guys, in this video, we will create a Contact Us page form using Next JS 13, MongoDB and Tailwind CSS. We will also create input validations for our contact form. We will be using mongoose package for working with MongoDB. I hope you find this useful.
Source code: github.com/God...

[@tomh888]

Thanks for this great tutorial! Helped me so much to build my first fullstack prototype

[@amychu4510]

Super useful and straightforward. Thank you!

[@skylakefreak3665]

Now if i host it on Vercel what changes I would required to make?

[@helojkayy-uv4hl]

have you found the answer for ur question? please share if u did

[@kareemlateefyomi8690]

Great tutorial. 👍 please do more of next js and typescript

[@Thess6969]

Legend, thank you for your Work

[@samarthdhawan6149]

Hi, I am getting an error in the console Failed to load resource: the server responded with a status of 404 (Not Found). How to resolve this?

[@yukiritosurada8392]

please make an infinitely nested comments using nextjs and mongodb 🙏🙏

[@redbeardjunior]

Thats Nice but handleSubmit = async (e) = {} is not working in production build will throw a error.

[@umanggoel5385]

wonderful explanation

[@ahmedabdelmeguid1131]

perfect work ..thanks a lot brother

[@raushankumar6993]

Thanks

[@ElevateMonk]

the source code source is not found

[@GTCoding]

I fixed the link, please check it again.

[@chevvvv]

23:40

[@luisjuarez9673]

inicio de la conexion a BD 14:45

[@josephbanaag3269]

The skills that you have when it comes to sharing your knowledge is extremely awesome. Thank you for creating this content. 🚀🚀🚀

[@isurueranga8183]

Thanks a lot, brother...

[@ahmedaq9018]

Such a clean a straightforward tutorial! Amazing!!

[@nakkeerangit]

Bro,Even if you do this,the output does not come,only the error comes ......
const mongoose = require('mongoose');
const dotenv = require('dotenv');
dotenv.config()
mongoose.connect(process.env.MONGO_URL)
.then(() => console.log("DB connected!"));
mongoose.connection.on('error',function(err){
console.log("The error is: ");
});

[@ErbilÖZÜM]

Thanks for video. But i am getting this error. TypeError: mongoose__WEBPACK_IMPORTED_MODULE_0___default(...).connect is not a function

[@khallingstad]

Fantastic video! Finally a simple to follow Nextjs tutorial. So many of the other videos on RUclips are so bloated and just do general introduction of concepts. Thank you for the great work! Keep it up :D

[@jayantgupta5310]

Nice tutorial, try to explain codes as well like what is NextResponse and functions to connect to db... etc.
because every tutorial shows working code but very few explain those codes.
Make more videos on Next JS.
Great work keep it up 👍👍

[@tsykin]

Simple yet subtle tutorial. Thanks a lot for helping me learn how to connect to MongoDB!

[@lalaniwerake881]

very nice tutorial, Thanks !

[@nakkeerangit]

bro,please replay in my comment....

[@alirazajafri6092]

thanks
it helped me alot..

[@mdkawsarislamyeasin4040]

Thank you so so so much,
I really appreciate how you explained, I was suffering from this problem for a long time, I connected mongoDB then also it was showing the same error, how use || operator that was absolutely fantastic idea and also how you checked mongoose connected that is also great idea, I am really thankful to you, I am a beginner in next.js.js
Thanks again for your help
And Happy Eid Mubarak to you and your family

[@GTCoding]

Thanks. I'm glad I could help.

[@rohithts2324]

Code is not working 😢

[@misbahsiddiqui9365]

i am also having error

[@walterlad8010]

email is required error

[@somtochukwuumehdaniel]

Please i want you to do a new tutorial as soon as possible. I want to learn how to convert figma designs to react code. I will really appreciate it, if you can create the tutorial as soon as possible

[@GTCoding]

Here is a video on that: ruclips.net/video/SD2l5x00U1k/видео.html

[@amardxb999]

Nice video

[@MrMaraxli]

It was great thank you but can you make second part for this video that we can get data from mongodb and show it on page

[@GTCoding]

I will create a video on CRUD operations using MongoDB and NextJS soon.

[@MrMaraxli]

@@GTCoding also I have question about mongo_uri. You added contact_db at the end of link but I didn't understand point of that . why you added and where we need that?

[@goviprasath1205]

const {msg} = await res.json(); i get error this line please tell me how to solve

[@goviprasath1205]

@gtcoding

[@rohithts2324]

Me also

[@rohithts2324]

How to solve this error

[@nakkeerangit]

MongooseError: The `uri` parameter to `openUri()` must be a string, got "undefined". Make
sure the first parameter to `mongoose.connect()` or `mongoose.createConnection()` is a string.
at _createMongoClient (E:\NEW CRUD API IN NEXT JS
ode_modules\mongoose\lib\connection.js:804:11)
at NativeConnection.openUri (E:\NEW CRUD API IN NEXT JS
ode_modules\mongoose\lib\connection.js:741:29)
at Mongoose.connect (E:\NEW CRUD API IN NEXT JS
ode_modules\mongoose\lib\index.js:404:15)
at connectDB (webpack-internal:///(sc_server)/./app/lib/mongodb.js:11:67)
at POST (webpack-internal:///(sc_server)/./app/api/contact/route.js:17:71)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async eval (webpack-internal:///(sc_server)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:253:37)

[@GTCoding]

Make sure that the environment variable for MONGO_URI is set and also check whether there is any typo in accessing it in the mongoose.connect() function.