Next.js 14 Admin Dashboard Tutorial
Welcome to our Next.js 14 Admin Dashboard tutorial! In this tutorial, we will walk you through the process of building a fullstack Next.js 14 project with server actions. By the end of this tutorial, you will have a fully functional admin dashboard that you can use to manage and monitor your applications.
Prerequisites
Before we get started, you will need to have Node.js and npm installed on your computer. If you haven’t installed them yet, you can download and install them from the official Node.js website.
Setting up the Project
To start, let’s create a new Next.js project by running the following commands in your terminal:
npx create-next-app@14 my-admin-dashboard
cd my-admin-dashboard
Once the project is set up, we can start adding the necessary components and libraries to build our admin dashboard.
Building the Dashboard
In this tutorial, we will utilize various Next.js 14 features and libraries to create a responsive and interactive admin dashboard. We will also incorporate server actions to enable communication between the frontend and backend of our application.
Conclusion
By following this tutorial, you should now have a fully functional admin dashboard built with Next.js 14 and server actions. You can further customize and expand the dashboard based on your specific requirements and preferences.
We hope this tutorial has been helpful in guiding you through the process of building an admin dashboard with Next.js 14. If you have any questions or need further assistance, feel free to reach out to us.
Hi Lama, at 20.21, line number 83 I can't render anything <li key={cat.title}>{cat.title}</li>. only when I use "return" i.e. return <li key={cat.title}>{cat.title}</li>, it starts to work all of a sudden. Any idea why?
Also, how can I auto signout the user when jwt expires
Thank you . I have a question. What's the difference between using custom authconfig and using WithAuth from next js. Which is better? And also can i use signout in the auth.js also can i use signout in a server component
I really love this content because it one of the solutions I have been looking for sometimes now. I will appreciate if we can get more content on Next 14, especially with commerce website.
I tried following the tutorial but I'm getting an error when trying to logging, I don't know what could have caused this. Even when I clone the complete branch of the tutorial, I'm still getting the same error, and you are not getting that in the video. where is the error coming from?
Error: NEXT_REDIRECT
at getRedirectError (webpack-internal:///(action-browser)/./node_modules/next/dist/client/components/redirect.js:44:19)
at redirect (webpack-internal:///(action-browser)/./node_modules/next/dist/client/components/redirect.js:54:11)
at signIn (webpack-internal:///(action-browser)/./node_modules/next-auth/lib/actions.js:63:89)
at async authenticate (webpack-internal:///(action-browser)/./src/app/lib/actions.js:145:9)
digest: 'NEXT_REDIRECT;replace;http://localhost:3000/login;false',
mutableCookies: p {
_parsed: Map(5) {
'_ga' => [Object],
'_fbp' => [Object],
'_ga_001DL7NH6R' => [Object],
'next-auth.callback-url' => [Object],
'next-auth.session-token' => [Object]
},
_headers: HeadersList {
[Symbol(headers map)]: [Map],
[Symbol(headers map sorted)]: null
}
}
}
Lama Dev is the best! Can you make also a tutorial using MySQL?
When / how is the products and users tables being created given the completed file? It seems you are using previous database info to make the user or bypassing the login auth. How do we do this? Does mongoose have no auto schema push like prisma?
Awesome bro <3
sir, how to deploy our next js app router 14 on our server vps using node js cpanel? is it have solusion to deploy?
Thanks for this video, it's nicely done. Can you come up with Full-stack Airbnb Clone in Next.js and Mongo DB.
In the connectToDB function you are trying to cache existing connection if it's not available in a caching object. But the object is inside the function. So everytime we try to connect to db it will be create a new instance of the caching object. So the caching should not be inside the function.
It's a pity you did not use TypeScript in this project !
is it just me, facing error when try to login 3:21:40 , entering correct username and password but the wrong credentials keep appear, and when i reload the page then its redirect me to dashboard instead. tried github code, and still the same
snippets?
Hi Lama, please upload new project using React, Next Js with Typescript which is very usefull for us
Good Tutorial but if use any css framework would save a lot of time. Overall its great!
23:30 – If the avatar image doesn't show, manually refresh the page. Also, import the "Image" component from "next" lib.
Hi, is it possible to implement a cron job with next.js without deploying to vercel? Also how can next.js server components cache data in in memory?
NO active menu User when redirect user detail
can you do some angular (MEAN) projects
This is a very cool tutorial an d i have been enjoying you tutorials, i learn react completely from this channel and now i'm learn nextjs. KUDUS to Lama Dev. Thanks for the tutorials. i have one confusion here on how to add social media login with role base authorization.