Next.js Projects - 9 NextJS 15 projects (Instagram, Google.)

Build a professional text-to-speech ai saas app with Next.js 16, offering multilingual voices across 22 languages. Clone voices with CheddarBox for natural, expressive output.

Integrate the Polar SDK with BetterAuth to enable credit upgrades and payments within a customer portal, including sandbox testing, webhooks, and environment variable configuration.

Learn how to set up the backend for a Next.js project, determine project requirements, and implement text-to-speech functionality.

Complete the create page inside the dashboard in the Next.js projects course, lesson 9, for learners.

Complete the dashboard page by rendering user stats and recent audio projects, enable quick actions, and include an audio player, while implementing client-side authentication and data fetching.

Discover a modern expense tracker built with Next.js 15, Tailwind CSS, and AI-powered insights, offering real-time analytics, intelligent expense categorization, dark mode, and seamless authentication.

Install Next.js and Tailwind CSS and create the first template for an expense tracker. Set up the app router with pages, components, and a shared layout including a navigation bar.

Connect your Next.js app to neon PostgreSQL using Prisma, set a database URL in environment variables, define user and record models, and run migrations to create tables.

Enable secure Next.js authentication with Clerk by installing Clerk, configuring environment variables and middleware, wrapping the app with the Clerk provider, and syncing users to Neon via a check-user function.

Learn to build a complete responsive navbar with Clerk authentication, a dark mode toggle, and dynamic sign-in or avatar, plus guest, about, and contact pages in Next.js projects.

Implement add expense functionality on the user dashboard with Next.js 15 server actions, including a form for description, date, category, and amount, plus AI-suggested categories.

Add an expense chart to the dashboard by creating a server action Get Records, fetching user expenses, and rendering them with bar chart using Chart.js for light and dark modes.

Fetch all user records via server actions to compute the average daily spending and the best and worst expenses, with color cues for dark and light modes.

Develop the AI insight component for expense data, with two server actions to fetch all insights and individual answers, handling user authentication and last 30 days of expenses.

Create and display the record history by fetching and sorting records, implement a delete record server action with authentication and revalidation, and build a client-side record item component.

Deploy your Next.js app to Vercel by importing your GitHub project, configuring environment variables, and resolving Prisma generate build issues to launch and test every page.

Build a modern, responsive sleep tracker app with Next.js 15, Tailwind CSS, Neon Postgres, and a real-time backend, featuring Clerk authentication, app router dashboard and server actions, plus Vercel deployment.

Install Next.js and Tailwind CSS, and create the first template for the sleep tracker. Set up the app structure, app directory and page.tsx, then run dev and push to GitHub.

Install neon and prisma to connect a Next.js app to neon postgres, set up env files, generate and migrate prisma models for user and record, and leverage neon's auto scaling.

Implement Clerk authentication in a Next.js 15 project, wire sign in and sign up, and manage users in Neon with a check-user function and a navbar showing the user avatar.

Create about and contact pages, implement a responsive footer, and build a guest component to show a non-authenticated home view using clerk sign-in flows in Next.js.

Create an add sleep record action and an add new record component to power a client-side form that saves or updates sleep data via Clerk auth and triggers page revalidation.

Create a user server action get records to fetch the signed-in user's sleep records, then build a RecordChart component with a client bar chart to visualize ten latest records.

Create a getUserRecord action to fetch a user's sleep records and compute the last month's average sleep, then implement the AverageSleep component to display hours and minutes.

Add a best and worst sleep component to the dashboard by creating a protected server action that fetches the user's sleep records and computes the best and worst hours.

Create a deleteRecord action and a RecordHistory component to manage sleep records with user verification, record deletion, and page revalidation for sleep history.

Deploy a Next.js app to Vercel, configure environment variables, and fix deployment issues. Verify the live domain and dashboard while testing data interactions.

Explore building a next authentication app with Clerk for seamless sign in, sign up, and multi-provider login, backed by MongoDB, Mongoose, and deployment on Vercel.

Install Next.js and Tailwind CSS with create next app, set up the public and src folders, enable the app router, and create a layout and header for the project.

Build a reusable header component in a Next.js app with Tailwind CSS, integrate it into the layout for all pages, featuring a left logo and right navigation.

Implement authentication in a Next.js app with Clerk, adding sign in and sign up flows using Google, Facebook, and GitHub, with avatar management in the header.

Sync clerk events to your Next.js app with webhooks, handling user created, updated, and deleted events, and set up endpoints and environment secrets for eventual MongoDB storage.

Set up a MongoDB cluster and mongoose, connect via a URI in .env, and implement clerk-driven webhook actions to create, update, or delete user records with a robust user model.

Complete home and about pages in the Next.js project by pasting and explaining the code, adding a title and three paragraphs, then push to the GitHub repository and clerk documentation.

Create a movie app like IMDb with details, search, authentication, and favorites stored in MongoDB, plus dark mode, responsive design, and Next.js with Tailwind CSS templates.

Install Next.js and Tailwind CSS, then create the first template in the project. Set up the public and src app structure, including page.js and layout.js.

Create a universal header component in a Next.js app by adding header.js and rendering it in layout.js, using next/link for navigation and enabling dark mode across all pages.

Create a header component and integrate it into the global layout so the header appears on pages, with a left-side menu for home and about and a dark mode logo.

Install and integrate the Next Teams package to enable dark mode with a server–client setup and a client-side switch using theme hooks and react icons.

Integrate clerk authentication into a Next.js app by configuring env vars, middleware, and provider, adding sign in/up pages, header user state, and planning webhooks to MongoDB.

Deploy a Clerk webhook to Vercel, configure real urls and env vars, create an api route for webhooks, and log created, updated, and deleted events.

Connect clerk events to a MongoDB database by installing mongoose, creating a user model, and upserting users via a webhook, then deploy and test with vercel.

Create an about page in the app directory with an about folder and page.js, populate it with text, and push changes to GitHub.

Create a navbar component and a dynamic /top/[genre] route for trending and top rated pages, and build a client-side item using usePathname for active styling in the shared layout.

Fetches trending and top-rated movies from TMDB API using a server-side component and an env API key, then renders results with card components showing images, titles, and release dates.

Create an error handling component in the Next.js app directory to manage api errors, await genre params, and offer a retry, stabilizing movie detail pages.

Create a dynamic movie detail page in Next.js that fetches TMDb data using the movie id and API key, then displays the image, title, release date, and rating.

Enhance the Next.js project by creating a client-side search box and a /search/[term] page to fetch movies by the search term, display results, handle no results, and prepare add-to-favorites.

Add a robust favorites feature with API routes and UI components by wiring the client to a favorites API, handling authentication, and updating the user's favorites in real time.

Automatically generate seo-friendly headlines and descriptions for a Next.js app by feeding trending movie data to Google Gemini via Ingest, scheduling daily or weekly updates.

Create a Next.js social media app with follow, like, comment, post creation, and search, powered by MongoDB and Clark authentication.

Install Next.js and Tailwind CSS, create the first template, and organize the project with apps, pages, routes, components, and APIs.

Create and organize Next.js pages and routes using the app directory, with auth and others folders, and dynamic routes for posts and users.

Build and integrate left and right sidebars into the layout for the home, post, user, and search pages, featuring a sticky left panel and a searchable right panel.

Learn how to add authentication using Clerk in a Next.js project by creating sign in and sign up pages, configuring middleware, and wiring Clerk provider for sign in/out flows.

Sync clerk data with your Next.js app by adding a webhook that triggers an API on user events, deploy to vercel, and configure /api/webhooks for user created, updated, and deleted.

Connect a Next.js app to MongoDB via a webhook to save Clerk users, set up the database, models, and actions for create, update, and delete.

Update the left sidebar by adding a client-side mini profile that shows the signed-in user's full name and username via Clark's useUser, with sign-in state controls visibility.

Add a client-side input on the home page that shows the signed-in user image, a text area, and an upload button, with plans for firebase storage and MongoDB storage.

Add firebase storage and implement a complete image upload flow for a Next.js project, including firebase setup, secure api keys, image preview, and storage rules with download url handling.

Build a complete upload post workflow by creating a post model and API route to save text and image posts to MongoDB, while managing input state and clerk user data.

Set up a server-side home feed by fetching all posts from MongoDB via a Next.js API route, using the environment URL, and render posts with a feed component and icons.

Add like functionality to the post component by toggling hollow and filled heart icons and updating the post.likes count via /api/post/like, with user authentication via clerk.

Add delete functionality to the post component by building an API route to delete posts, protecting the trash icon for owners, confirming before delete, and refreshing the page on success.

Install and implement recoil to create a global state with a comment model atom, wrap app with a session wrapper and recoil root, and toggle the modal via chat icon.

Install react-modal and implement a CommentModal component using recoil to pass the post id and open the modal. Fetch post data via api and render post details and comment input.

Develop add comment functionality in the commentModal component by creating an api route to post comments to MongoDB, update the post, and display comment counts.

Complete the post page by fetching post data server-side via the api using the post id, render the post with a comments component, and handle errors while enabling comment refresh.

Builds the user page to fetch and display a user's profile and posts, adds APIs for getting a user and their posts, and enables follow/unfollow with a client-side button.

Create a complete search page by decoding the URL term, querying posts by username, name, or text in MongoDB, and choosing server-side or client-side rendering for SEO and speed.

Build a Next.js blog with strong SEO using features like dark mode, an admin dashboard, post and comment management, and a responsive design with Tailwind CSS, Flowbite, and Clerk.

Install Next.js and Tailwind CSS, create your first template in a new project, test with npm run dev, and push changes to GitHub for easy deployment.

Create a reusable header in the app layout so pages share it, with navigation and search, styled with Flow Bite and Tailwind, and prep for dark mode with Next Themes.

Learn to implement dark mode in a Next.js 15 project by installing next-themes, wrapping with a theme provider, and adding a header toggle that switches moon and sun icons.

Add authentication to a Next.js app with Clerk, including sign in/out pages, environment variables, a Clerk provider, and dark/light theming.

Sync clerk data to your next.js app with webhooks, create an api route, configure a webhook secret, deploy to vercel, and log events such as user created, updated, and deleted.

Connect MongoDB with Clerk by creating a mongoose-based user model, syncing Clerk user data via a webhook, and storing or updating users with create, update, and delete actions.

Create a private dashboard create-post page protected by middleware and admin checks, then build a rich form with title, category, image, and a client-side rich text editor using React Quill.

Enable image uploads on the create post page by wiring Firebase storage with upload bytes resumable and obtaining the download URL to attach to post data.

Complete post submission by adding the title and category to form data with the uploaded image, then submit via a new api route and redirect to the post page.

Build a complete post page with slug routing, fetch post data via an API route, and display the title, category, image, read time, content, and call to action.

Add a recent article section to the post page by creating a recent post component that fetches three posts from the API and renders cards with image, title, and category.

Build the home page by reusing the post page components, fetch nine recent posts server-side, and render a welcome message with a call to action alongside recent articles.

Create a client-side next.js search page that updates the URL with the search term, reads it back, and fetches nine posts filtered by term, sort, and category.

Learn to add a site-wide footer in a Next.js project, create a footer component, integrate it into the layout, and build about and projects pages with a CTA.

Redirects the manage account action to the dashboard and builds a tabbed profile dashboard with a sidebar and profile, post, and user views controlled by the tab url parameter.

Show and manage a user's posts in the dashboard with a delete confirmation modal. Fetch posts by user id and handle delete and update via api routes.

Update the dash users component to fetch all users via an admin-only API route using useEffect, and render a users table with creation date, image, name, email, and admin status.

Complete the admin dashboard overview by displaying the status of users and posts—including totals, last-month metrics, and recent items in a two-column table with image and username—via shared API routes.

Learn to build a real estate site with Next.js and MongoDB, featuring SEO-friendly pages, searchable listings, filters, and image cards. Authenticate users to create and update listings with CRUD operations.

install Next.js and Tailwind CSS and create the first template, then set up the app structure with an app directory, pages, and components, and publish to GitHub.

Create header.jsx in src/components for a Next.js project with Tailwind CSS, featuring a logo, search bar, and responsive menu added to layout.js.

Implement Clerk authentication in a Next.js app by adding sign in and sign up routes, wrapping with the Clerk provider, and displaying user avatars via the user button.

Configure Clark webhooks by deploying to Vercel, setting the signing secret, and building an API route at /api/webhooks to handle user created, updated, and deleted events.

Add MongoDB to a Next.js app by syncing Clerk users to MongoDB, building a user model and create/update/delete actions, and wiring a webhook to Clerk events.

complete the create listing page UI in a Next.js project using MongoDB, featuring a two-column form with name, description, address, options, pricing, and image upload.

Implement complete image upload using Firebase storage in a Next.js project, including selecting files, tracking upload progress, and handling errors. Display uploaded images and allow removal to manage image listings.

Create a Next.js 15 listing page: build a listing model, implement onChange handlers, validate data, upload images, call a MongoDB API route, and redirect to the new listing.

Build an update listing page that fetches the listing by ID to pre-fill a form, then calls an update API to save changes with authorization checks.

Create a server-side listing page for the id route, fetch the listing from the API, and render image, title, address, beds, baths, parking, furnished, and pricing, with clear error messages.

Build the home and about pages by fetching rent, sale, and offer listings, render listing items with image, name, address, description, offers, bedrooms, bathrooms, and finalize with GitHub push.

Create a client-side search page in Next.js that uses header input to drive a URL-based search and displays filtered listings with a show more option.

Preview a Next.js clone project with a login-protected feed of text or image posts, like and comment features, and SEO-friendly server-side rendering using next auth, firebase, and app directory.

Install Next.js and Tailwind CSS in a new VS Code project, configure the app directory, run the dev server, verify Tailwind styling, and push the initial commit to GitHub.

Create pages and routes in a Next.js project using the app directory, including dynamic posts with id, shared layout, and reusable components like sidebar and news.

Build a responsive sidebar component in a Next.js app using react-icons and next/link, with home and twitter icons, hover styles, and a sign-in button.

Build a sticky top search bar and a client-side news feed that fetches business headlines from a free API, displaying three articles with titles, sources, and images, plus load more.

Implement next-auth to protect site sections like the sidebar and inputs, add a client-side session wrapper, and configure Google provider with env vars and API routes.

Add a mini profile to the sidebar by extending NextAuth session with a username derived from the user's name and a Google uid, then render the avatar, name, and username.

Add a client-side input component on the home page to upload an image and post a tweet, while keeping the image text server-side; implement session-based rendering and integrate styling.

Learn to add firebase storage and implement complete image file upload functionality in a Next.js app: select, preview, and upload images with useEffect, storage rules, and download URLs.

In a Next.js project, capture text input and image, then save a new post to Firestore's posts collection with username, profile image, uid, and timestamp using addDoc and serverTimestamp.

Create a server-side rendered feed component in Next.js that fetches posts from Firebase Firestore, orders by timestamp, and renders each post with user image and caption on the home page.

Create a client-side icons component for the post, implement sticky sidebar and hover effects, and integrate hero icons for chat, heart, and trash to enhance the feed UI.

Implement a like system in a Next.js app using Firestore: authenticate with next-auth, attach post IDs, manage a likes collection with timestamps, and display real-time like counts.

Implement delete post functionality in the icons component with ownership checks, a confirmation prompt, and deletion with page refresh, plus preparing global state with recoil for user and post IDs.

Install recoil and create a global modal state in a Next.js project to manage a comment modal across pages, toggled by the chat icon.

Add the react-modal package to the CommentModal component, manage post ID with recoil state, and wire up authentication and firebase data to display user info and enable posting comments.

Add comment submission with Firebase Firestore by saving name, user image, text, and a server timestamp to a post's comments collection, then redirect to the post page using router.

Create a per-post page in Next.js 15 that fetches Firestore data by the post id and displays the post with the existing component.

Add a comments section to the post page with user image, name, and text. Fetch comments by post ID from Firestore and implement a Comment component with like functionality.

Add like functionality to the comment component by using a session-aware like toggle and a nested likes collection, updating state and the user interface accordingly.

Deploy your Next.js app to Vercel by connecting your GitHub repo, configuring environment variables, and redeploying to apply changes and verify login via Google API.