Next.js 13 Full Course 2023 | Build and Deploy a Full Stack App Using the Official React Framework

globals.css

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");

@tailwind base;
@tailwind components;
@tailwind utilities;

/* 
  Note: The styles for this gradient grid background is heavily inspired by the creator of this amazing site (https://dub.sh) – all credits go to them! 
*/

.main {
  width: 100vw;
  min-height: 100vh;
  position: fixed;
  display: flex;
  justify-content: center;
  padding: 120px 24px 160px 24px;
  pointer-events: none;
}

.main:before {
  background: radial-gradient(circle, rgba(2, 0, 36, 0) 0, #fafafa 100%);
  position: absolute;
  content: "";
  z-index: 2;
  width: 100%;
  height: 100%;
  top: 0;
}

.main:after {
  content: "";
  background-image: url("/assets/images/grid.svg");
  z-index: 1;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  opacity: 0.4;
  filter: invert(1);
}

.gradient {
  height: fit-content;
  z-index: 3;
  width: 100%;
  max-width: 640px;
  background-image: radial-gradient(
      at 27% 37%,
      hsla(215, 98%, 61%, 1) 0px,
      transparent 0%
    ),
    radial-gradient(at 97% 21%, hsla(125, 98%, 72%, 1) 0px, transparent 50%),
    radial-gradient(at 52% 99%, hsla(354, 98%, 61%, 1) 0px, transparent 50%),
    radial-gradient(at 10% 29%, hsla(256, 96%, 67%, 1) 0px, transparent 50%),
    radial-gradient(at 97% 96%, hsla(38, 60%, 74%, 1) 0px, transparent 50%),
    radial-gradient(at 33% 50%, hsla(222, 67%, 73%, 1) 0px, transparent 50%),
    radial-gradient(at 79% 53%, hsla(343, 68%, 79%, 1) 0px, transparent 50%);
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  filter: blur(100px) saturate(150%);
  top: 80px;
  opacity: 0.15;
}

@media screen and (max-width: 640px) {
  .main {
    padding: 0;
  }
}

/* Tailwind Styles */

.app {
  @apply relative z-10 flex justify-center items-center flex-col max-w-7xl mx-auto sm:px-16 px-6;
}

.black_btn {
  @apply rounded-full border border-black bg-black py-1.5 px-5 text-white transition-all hover:bg-white hover:text-black text-center text-sm font-inter flex items-center justify-center;
}

.outline_btn {
  @apply rounded-full border border-black bg-transparent py-1.5 px-5 text-black transition-all hover:bg-black hover:text-white text-center text-sm font-inter flex items-center justify-center;
}

.head_text {
  @apply mt-5 text-5xl font-extrabold leading-[1.15] text-black sm:text-6xl;
}

.orange_gradient {
  @apply bg-gradient-to-r from-amber-500 via-orange-600 to-yellow-500 bg-clip-text text-transparent;
}

.green_gradient {
  @apply bg-gradient-to-r from-green-400 to-green-500 bg-clip-text text-transparent;
}

.blue_gradient {
  @apply bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent;
}

.desc {
  @apply mt-5 text-lg text-gray-600 sm:text-xl max-w-2xl;
}

.search_input {
  @apply block w-full rounded-md border border-gray-200 bg-white py-2.5 font-satoshi pl-5 pr-12 text-sm shadow-lg font-medium focus:border-black focus:outline-none focus:ring-0;
}

.copy_btn {
  @apply w-7 h-7 rounded-full bg-white/10 shadow-[inset_10px_-50px_94px_0_rgb(199,199,199,0.2)] backdrop-blur flex justify-center items-center cursor-pointer;
}

.glassmorphism {
  @apply rounded-xl border border-gray-200 bg-white/20 shadow-[inset_10px_-50px_94px_0_rgb(199,199,199,0.2)] backdrop-blur p-5;
}

.prompt_layout {
  @apply space-y-6 py-8 sm:columns-2 sm:gap-6 xl:columns-3;
}

/* Feed Component */
.feed {
  @apply mt-16 mx-auto w-full max-w-xl flex justify-center items-center flex-col gap-2;
}

/* Form Component */
.form_textarea {
  @apply w-full flex rounded-lg h-[200px] mt-2 p-3 text-sm text-gray-500 outline-0;
}

.form_input {
  @apply w-full flex rounded-lg mt-2 p-3 text-sm text-gray-500 outline-0;
}

/* Nav Component */
.logo_text {
  @apply max-sm:hidden font-satoshi font-semibold text-lg text-black tracking-wide;
}

.dropdown {
  @apply absolute right-0 top-full mt-3 w-full p-5 rounded-lg bg-white min-w-[210px] flex flex-col gap-2 justify-end items-end;
}

.dropdown_link {
  @apply text-sm font-inter text-gray-700 hover:text-gray-500 font-medium;
}

/* PromptCard Component */
.prompt_card {
  @apply flex-1 break-inside-avoid rounded-lg border border-gray-300 bg-white/20 bg-clip-padding p-6 pb-4 backdrop-blur-lg backdrop-filter md:w-[360px] w-full h-fit;
}

.flex-center {
  @apply flex justify-center items-center;
}

.flex-start {
  @apply flex justify-start items-start;
}

.flex-end {
  @apply flex justify-end items-center;
}

.flex-between {
  @apply flex justify-between items-center;
}

jsconfig.json

{
  "compilerOptions": {
    "paths": {
      "@*": ["./*"]
    }
  }
}

route.js

import Prompt from "@models/prompt";
import { connectToDB } from "@utils/database";

export const GET = async (request, { params }) => {
    try {
        await connectToDB()

        const prompt = await Prompt.findById(params.id).populate("creator")
        if (!prompt) return new Response("Prompt Not Found", { status: 404 });

        return new Response(JSON.stringify(prompt), { status: 200 })

    } catch (error) {
        return new Response("Internal Server Error", { status: 500 });
    }
}

export const PATCH = async (request, { params }) => {
    const { prompt, tag } = await request.json();

    try {
        await connectToDB();

        // Find the existing prompt by ID
        const existingPrompt = await Prompt.findById(params.id);

        if (!existingPrompt) {
            return new Response("Prompt not found", { status: 404 });
        }

        // Update the prompt with new data
        existingPrompt.prompt = prompt;
        existingPrompt.tag = tag;

        await existingPrompt.save();

        return new Response("Successfully updated the Prompts", { status: 200 });
    } catch (error) {
        return new Response("Error Updating Prompt", { status: 500 });
    }
};

export const DELETE = async (request, { params }) => {
    try {
        await connectToDB();

        // Find the prompt by ID and remove it
        await Prompt.findByIdAndRemove(params.id);

        return new Response("Prompt deleted successfully", { status: 200 });
    } catch (error) {
        return new Response("Error deleting prompt", { status: 500 });
    }
};

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        satoshi: ['Satoshi', 'sans-serif'],
        inter: ['Inter', 'sans-serif'],
      },
      colors: {
        'primary-orange': '#FF5722',
      }
    },
  },
  plugins: [],
}

user.js

username: {
    type: String,
    required: [true, 'Username is required!'],
    match: [/^(?=.{8,20}$)(?![_.])(?!.*[_.]{2})[a-zA-Z0-9._]+(?<![_.])$/, "Username invalid, it should contain 8-20 alphanumeric letters and be unique!"]
  },

Can someone guide me on this error

It appears that there's an extra space in the tailwind class sm: px-16. Do you see the space space between : and p

There is a space between sm: and px-16. Please remove it. It should be sm:px-16

Thanks for that. Although that error is really annoying.

is it not resolved? Still the same error? Or no?

You'll still receive errors even after removing that space. I copied the entire globals.css file from the github and pasted it. Just before saving it, click ctrl+z so that whatever the auto-beautifier or any of the changes/alterations to look prettier made will go away, and then save the file. Now you are good to go.

Someone had the same issue? It happens in My Profile page, the posts that I did isn't showed.

we have the same issue had you fixed the bug ?

Someone had the same issue? It happens in My Profile page, the posts that I did isn't showed.

we have the same issue had you fixed the bug ?

No my friend, I'm still trying

Someone had the same issue? It happens in My Profile page, the posts that I did isn't showed.

we have the same issue had you fixed the bug ?

Now I fixed, in my case was it:

In Profile.jsx I changed {} by ()

Wrong

import PromptCard from "./PromptCard";

const Profile = ({ name, desc, data, handleEdit, handleDelete }) => {
  return (
    <section className='w-full'>
      <h1 className='head_text text-left'>
        <span className='blue_gradient'>{name} Profile</span>
      </h1>
      <p className='desc text-left'>{desc}</p>

      <div className='mt-10 prompt_layout'>
        {data.map((post) => {
          <PromptCard
            key={post._id}
            post={post}
            handleEdit={() => handleEdit && handleEdit(post)}
            handleDelete={() => handleDelete && handleDelete(post)}
          />
        })}
      </div>
    </section>
  );
};

export default Profile;

Correct

import PromptCard from './PromptCard'

const Profile = ({ name, desc, data, handleEdit, handleDelete }) => {
  return (
    <section className='w-full'>
      <h1 className='head_text text-left'>
        <span className='blue_gradient'>{name} Profile</span>
      </h1>
      <p className='desc text-left'>{desc}</p>
      
      <div className='mt-10 prompt_layout'>
        {data.map((post) => (
          <PromptCard 
            key={post._id}
            post={post}
            handleEdit={() => handleEdit && handleEdit(post)}
            handleDelete={() => handleDelete && handleDelete(post)}
          />
          ))}
      </div>
    </section>
  )
}

export default Profile

Connected
TypeError: Cannot read properties of undefined (reading 'findOne')
at Object.signIn (webpack-internal:///(sc_server)/./app/api/auth/[...nextauth]/route.js:32:95)
at async Object.callback (webpack-internal:///(sc_server)/./node_modules/next-auth/core/routes/callback.js:49:39)
at async AuthHandler (webpack-internal:///(sc_server)/./node_modules/next-auth/core/index.js:202:38)
at async NextAuthRouteHandler (webpack-internal:///(sc_server)/./node_modules/next-auth/next/index.js:49:30)
at async NextAuth._args$ (webpack-internal:///(sc_server)/./node_modules/next-auth/next/index.js:83:24)
at async eval (webpack-internal:///(sc_server)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:242:37)

anybody getting hydration error when adding the submit button in Form.js ? the error says : "Error: Hydration failed because the initial UI does not match what was rendered on the server. Warning: Expected server HTML to contain a matching form in section ."

I deleted the .next folder and restarted the project and that fixed it.

At 1:43:40 (on youtube), he gets an access blocked screen after clicking the signing button, whereas I don't get that. It allows me to go to the auth page but I can't sign in and says "try signing with a different account".

The big error that I keep getting is this :
https://next-auth.js.org/errors#signin_oauth_error client_id is required {
error: {
message: 'client_id is required',
stack: 'TypeError: client_id is required\n' +
' at new BaseClient (webpack-internal:///(sc_server)/./node_modules/openid-client/lib/client.js:142:19)\n' +
' at new Client (webpack-internal:///(sc_server)/./node_modules/openid-client/lib/client.js:1613:13)\n' +
' at openidClient (webpack-internal:///(sc_server)/./node_modules/next-auth/core/lib/oauth/client.js:23:20)\n' +
' at process.processTicksAndRejections (node:internal/process/task_queues:95:5)\n' +
' at async getAuthorizationUrl (webpack-internal:///(sc_server)/./node_modules/next-auth/core/lib/oauth/authorization-url.js:88:20)\n' +
' at async Object.signin (webpack-internal:///(sc_server)/./node_modules/next-auth/core/routes/signin.js:21:30)\n' +
' at async AuthHandler (webpack-internal:///(sc_server)/./node_modules/next-auth/core/index.js:259:36)\n' +
' at async NextAuthRouteHandler (webpack-internal:///(sc_server)/./node_modules/next-auth/next/index.js:49:30)\n' +
' at async NextAuth._args$ (webpack-internal:///(sc_server)/./node_modules/next-auth/next/index.js:83:24)\n' +
' at async eval (webpack-internal:///(sc_server)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:242:37)',
name: 'TypeError'
},
providerId: 'google',
message: 'client_id is required'
}

Not sure what to do

Also for folks encountering the "Try signing in with a different account." issue, check your Google Client ID and Client Secret (be wary of trailing spaces). I don't think this will help the folks facing the TypeError w/client_id.

Please where can i find the asset folder

Please where can i find the asset folder

https://drive.google.com/file/d/15bGW...

So how many of You guys succesfully finished and deployed app to vercel? I have problem with buttons showing up so I can't log in. Environemntal variables and googlecloud seems to be set properly. Anyone had problem with this?

I am getting the Access denied error when trying to log in. This happens after putting the session() and signIn() functions in the callbacks.

Please help me figure this out.

I had the same problem. İ have tried it to solve for two days. I have done everything told up. Nothing worked. Than i switched computer. İt have worked.

At 01:24:37 of the YouTube video, the following is displayed in my Browser for localhost:3000

• missing required error components, refreshing...

Not sure what to do next

I am getting the Access denied error when trying to log in. This happens after putting the session() and signIn() functions in the callbacks.

Please help me figure this out.

you find the error? i have de same issue and i am very lost

I am getting the Access denied error when trying to log in. This happens after putting the session() and signIn() functions in the callbacks.

Please help me figure this out.

you find the error? i have de same issue and i am very lost

1. Make sure the password match in .env and MONGO DB. I noticed sometimes the password does not update if you changed it.
2. Make sure the < > are removed in the env file for the MONGODB_URI
3. Make sure you add your email as an authorize tester in the Google Cloud project
4. Make sure there are no trailing spaces in the IDs

i have deployed finally and it is working fine just but the feed component is not working properly. It is static. only the prompts which is ready at the deployment are shown on main page. Neither new posts or deleted post are not changing main page. I thought it might be a caching issue so i have changed the fetch options to cache: "no-store". But it is not revalidating the main page. Is there any idea about this issue.

It is working fine with localhost. It is not working when it is alive.

i have deployed finally and it is working fine just but the feed component is not working properly. It is static. only the prompts which is ready at the deployment are shown on main page. Neither new posts or deleted post are not changing main page. I thought it might be a caching issue so i have changed the fetch options to cache: "no-store". But it is not revalidating the main page. Is there any idea about this issue.

It is working fine with localhost. It is not working when it is alive.

I am struggling with the same issue. It is also not possible to fetch the data with postman.

i have deployed finally and it is working fine just but the feed component is not working properly. It is static. only the prompts which is ready at the deployment are shown on main page. Neither new posts or deleted post are not changing main page. I thought it might be a caching issue so i have changed the fetch options to cache: "no-store". But it is not revalidating the main page. Is there any idea about this issue.

It is working fine with localhost. It is not working when it is alive.

For me, I just had to copy paste his database.js code, turns out I had a wrong const name, Copilot probably renamed it for me.

i have deployed finally and it is working fine just but the feed component is not working properly. It is static. only the prompts which is ready at the deployment are shown on main page. Neither new posts or deleted post are not changing main page. I thought it might be a caching issue so i have changed the fetch options to cache: "no-store". But it is not revalidating the main page. Is there any idea about this issue.
It is working fine with localhost. It is not working when it is alive.

For me, I just had to copy paste his database.js code, turns out I had a wrong const name, Copilot probably renamed it for me.

It can connect to mongodb. I can delete/edit myprofile page and it updated alive but the main page is not updated.

i have deployed finally and it is working fine just but the feed component is not working properly. It is static. only the prompts which is ready at the deployment are shown on main page. Neither new posts or deleted post are not changing main page. I thought it might be a caching issue so i have changed the fetch options to cache: "no-store". But it is not revalidating the main page. Is there any idea about this issue.
It is working fine with localhost. It is not working when it is alive.

For me, I just had to copy paste his database.js code, turns out I had a wrong const name, Copilot probably renamed it for me.

It can connect to mongodb. I can delete/edit myprofile page and it updated alive but the main page is not updated.

I have done lots of things but nothing worked. When i deploy new code, it only than updating than "api/prompt" giving 304 server code, only returning the same thing from cache. I couldnt solve by nextjs documentation.

Does anyone know what this error is about? Everything works fine locally, but after deployment, there are no login buttons, only the main page with the previously created prompts.

At 1:43:40 (on youtube), he gets an access blocked screen after clicking the signing button, whereas I don't get that. It allows me to go to the auth page but I can't sign in and says "try signing with a different account".

The big error that I keep getting is this : https://next-auth.js.org/errors#signin_oauth_error client_id is required { error: { message: 'client_id is required', stack: 'TypeError: client_id is required\n' + ' at new BaseClient (webpack-internal:///(sc_server)/./node_modules/openid-client/lib/client.js:142:19)\n' + ' at new Client (webpack-internal:///(sc_server)/./node_modules/openid-client/lib/client.js:1613:13)\n' + ' at openidClient (webpack-internal:///(sc_server)/./node_modules/next-auth/core/lib/oauth/client.js:23:20)\n' + ' at process.processTicksAndRejections (node:internal/process/task_queues:95:5)\n' + ' at async getAuthorizationUrl (webpack-internal:///(sc_server)/./node_modules/next-auth/core/lib/oauth/authorization-url.js:88:20)\n' + ' at async Object.signin (webpack-internal:///(sc_server)/./node_modules/next-auth/core/routes/signin.js:21:30)\n' + ' at async AuthHandler (webpack-internal:///(sc_server)/./node_modules/next-auth/core/index.js:259:36)\n' + ' at async NextAuthRouteHandler (webpack-internal:///(sc_server)/./node_modules/next-auth/next/index.js:49:30)\n' + ' at async NextAuth._args$ (webpack-internal:///(sc_server)/./node_modules/next-auth/next/index.js:83:24)\n' + ' at async eval (webpack-internal:///(sc_server)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:242:37)', name: 'TypeError' }, providerId: 'google', message: 'client_id is required' }

Not sure what to do

For those who had the problem where it was suggested to try with other account to sign in, and you are using VPN like me, just try to switch to another server or just turn it off. For me that fixed the issue

if you're having trouble signing in because your username has multiple white space change the

await User.create({
            email: profile.email,
            username: profile.name.replace(" ", "").toLowerCase(),
            image: profile.picture
          })

to

await User.create({
            email: profile.email,
            username: profile.name.replace(/\s/g, "").toLowerCase(),
            image: profile.picture
          })

Thank you so much for this! Solved my problem ^^

Does anyone know what this error is about? Everything works fine locally, but after deployment, there are no login buttons, only the main page with the previously created prompts.

I have same one, my issue was a typo with NEXTAUTH_SECRET variable

Does anyone know what this error is about? Everything works fine locally, but after deployment, there are no login buttons, only the main page with the previously created prompts.

I have same one, my issue was a typo with NEXTAUTH_SECRET variable

Thanks. This gave me a hint that it must be something about this variable. In route.js I added a line between providers:[] and callbacks:[] with secret:process.env.NEXT_AUTH_SECRET and it's working now. I conclude this line is neccessary but I don't remember seeing it on the video or in final githubcode.

"use client";
import Link from 'next/link';
import Image from 'next/image';
import {useState,useEffect} from 'react';
import {signIn,signOut,useSession,getProviders} from 'next-auth'
const Nav = () => {
const isUserLoggedIn=true;
const [providers,setProviders]=useState(null);
const [toggleDropdown,setToggleDropdown]=useState(false);
useEffect(()=>{
const setProviders=async ()=>{
const response=await getProviders();
setProviders(response);
}
setProviders();
},[])
return (

<Image src="/assets/images/logo.svg" alt="promptopia Logo"width={30} height={30}
className="object-contain"/>

Promptopia

{/* Desktop Navigation*/}

  <div className="sm:flex hidden">
      {isUserLoggedIn ? (
        <div className="flex gap-3 md:gap-5">
          <Link href="/create-propmpt"className="black_btn">Create Post</Link>
          <button type="button" onClick={signOut} className="outline_btn">Sign out</button>

          <Link href="/profile">
            <Image src="/assets/images/logo.svg"width={37} height={37} className="rounded-full" alt="profile"/>
          </Link>
        </div>
      ):(
        <>
          {providers && Object.values(providers).map((provider)=>{
            <button type="button" key={provider.name} onClick={()=>signIn(provider.id)} className="black_btn">
                  Sign In
            </button>
          })}
        </>
      )}
  </div>
  {/* Mobile Navigation */}
  <div className="sm:hidden flex relative">
    {isUserLoggedIn ? (
      <div className="flex">
        <Image src="/assets/images/logo.svg"width={37} height={37} 
        className="rounded-full" 
        onClick={()=>setToggleDropdown((prev)=>!prev)} alt="profile"/>

        {toggleDropdown && (
          <div className="dropdown">
            <Link href="/profile" className="dropdown_link" 
            onClick={()=>setToggleDropdown(false)}>
              My Profile
            </Link>

            <Link href="/create-prompt" className="dropdown_link" 
            onClick={()=>setToggleDropdown(false)}>
               Create Prompt
            </Link>
            <button type="button" onClick={()=>{
              setToggleDropdown(false);
              signOut();
            }}
            className="mt-5 w-full black_btn">
              Sign Out
            </button>
          </div>
        )}
      </div>
    ):(
      <>
          {providers && Object.values(providers).map((provider)=>{
            <button type="button" key={provider.name} onClick={()=>signIn(provider.id)} className="black_btn">
                  Sign In
            </button>
          })}
        </>
    )}
  </div>
</nav>

);
}

export default Nav;
i didnt get the dropdown in the logo can you tell me the reason

i have deployed finally and it is working fine just but the feed component is not working properly. It is static. only the prompts which is ready at the deployment are shown on main page. Neither new posts or deleted post are not changing main page. I thought it might be a caching issue so i have changed the fetch options to cache: "no-store". But it is not revalidating the main page. Is there any idea about this issue.
It is working fine with localhost. It is not working when it is alive.

For me, I just had to copy paste his database.js code, turns out I had a wrong const name, Copilot probably renamed it for me.

It can connect to mongodb. I can delete/edit myprofile page and it updated alive but the main page is not updated.

I have done lots of things but nothing worked. When i deploy new code, it only than updating than "api/prompt" giving 304 server code, only returning the same thing from cache. I couldnt solve by nextjs documentation.

Encountered a similar issue, which can be resolved by modifying the headers in your fetch request to disable data caching.

Guys, i'm not seeing the error mentioned above yet, maybe because i haven't gotten to that part. the error I'm seeing currently is in my PromptCard component, the post object is return undefined in the ui and thereby using the optional chaining method just so it wont throw the error in the ui so i could continue but i just wanna make it work. Now i'm rendering the post.prompt and post.tag but nothing is working. Please Help

hello. were you ever able to make it work? currently on the PromptCard component too.

guys mongodb/atlas is not working for me it says site can not be reached and i can not register with email or create account can anyone help me?