NextJS Learning

1. Build a ChatGPT clone using NextJS, Auth0, OpenAI, MongoDb, Versel, TailwindCss

• 1 - Introduction
• 1 - Introduction
• 2 - Project setup
• 3 - Udemy ratings reviews
• 4 - Set up the chat route page


• 2 - Authentication authorization with Auth0
• 5 - Set up auth0 for authentication
• 6 - Create auth api routes
• 7 - Set up the login and logout state
• 8 - Style the homepage with tailwind css
• 9 - Implement signup functionality
• 10 - Redirect to chat page if logged in


• 3 - Build out the chat page
• 11 - Create the basic chat page layout
• 12 - Create the ChatSidebar component and add the logout link
• 13 - Create the footer and message form


• 4 - Build the OpenAI streaming functionality
• 14 - Create an OpenAI API key
• 15 - Create the sendMessage endpoint
• 16 - Set up the OpenAI API call
• 17 - Stream the OpenAI response on the front end
• 18 - Create the Message component and display new messages in chat window
• 19 - Finish implementing the Message component styles and logic
• 20 - Protect the chat routes and pages so only logged in users can access
• 21 - Add the loading state to the form
• 22 - Refine the OpenAI prompt
• 23 - Fix the footer form position and make chat window scrollable


• 5 - Storing chats with MongoDB
• 24 - Overview of edge functions
• 25 - Set up MongoDB Atlas account
• 26 - Set up the createChat endpoint
• 27 - Test the createChat endpoint
• 28 - Create the getChats endpoint
• 29 - Render the list of chats in the sidebar
• 30 - Style the chat list in the sidebar
• 31 - Implement creating a chat in the sendMessage endpoint
• 32 - Create the addMessageToChat endpoint
• 33 - Navigate to newly created chat page
• 34 - Reload chat list on route change
• 35 - Load chat messages for a particular chat
• 36 - Render chat messages for a particular chat
• 37 - Modify the sendMessage endpoint to cater for existing chats
• 38 - Implement conversation history in OpenAI


• 6 - Deploy
• 39 - Deploy to vercel

2. Egghead lectures

1. Fundamental Next.js API and Patterns (full code exist on Github)Lazar Nikolov



2. Effectively Build RESTful APIs using Next.js API RoutesAlejandro Ñáñez
3. Integrate Storybook in a Next.js ApplicationMichael Chan
4. Build Static Pages Dynamically using Next.js and the Notion APIJon Meyers
5. Build a Modern User Interface with Chakra UILazar Nikolov
6. Build a Real-Time Data Syncing Chat Application with Supabase and Next.jsKristian Freeman
7. Full-Stack Serverless Apps with Next.js & FaunaShadid Haque
8. Architect an Extensible Digital Garden with Next.js, Tailwind, and NxJuri Strumpflohner
9. Build a SaaS product with Next.js, Supabase and StripeJon Meyers
10. Create an eCommerce Store with Next.js and Stripe CheckoutColby Fayock
11. Ecommerce Product Management & Storefront with GraphCMS, Snipcart, & Next.jsColby Fayock
12. Full-Stack Serverless Applications with Next.js & FaunaShadid Haque
13. Integrate Storybook in a Next.js ApplicationMichael Chan
14. Create Contextual Video Analysis App with NextJS and Symbl.aiVladimir Novick
15. Build a full-stack app with PrismaXiaoru Li
16. Introduction to Next.js 9Xiaoru Li
17. Build a Twitter Clone with the Next.js App Router and SupabaseJon Meyers
18. Architect an Extensible Digital Garden with Next.js, Tailwind, and NxJuri Strumpflohner
19. Build a SaaS product with Next.js, Supabase and StripeJon Meyers
20. Build a Modern User Interface with Chakra UILazar Nikolov
21. Build Static Pages Dynamically using Next.js and the Notion APIJon Meyers
22. Next Migration Course ExtrasBen Patton
23. Migrate Next.js Application to App RouterBen Patton

Related page:

• (2023) CloudflareWorker and Supabase
• (2022) NativeScript, AndroidBooks
• (2022) JS, Css
• (2022) Typescript, Webpack
• (2022) Angular, RxJs, Firebase, MongoDb
• (2022) Node, NestJs, Electron, Pwa, Telegram
• (2022) React, Redux, GraphQL, NextJs
• (2022) Angular/Typescript, JS books

Comments ( )