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!"]
  },

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
          })

@LastSurvivor250 I Had this same issue and solved it by doing two things:

1. Make sure to remove "<" and ">" brackets from MONGODV_URI that surround your password.
2. Make sure your have Built-in Role Privilege to Read and write to any database - in mongobd - Database Access < Select Edit < click Buildin Role < Select Rea and write to any database
3. Change it back to callbacks instead of just callback in route.js

[next-auth][error][JWT_SESSION_ERROR] 
https://next-auth.js.org/errors#jwt_session_error Operation `users.findOne()` buffering timed out after 10000ms {
  message: 'Operation `users.findOne()` buffering timed out after 10000ms',   
  stack: 'MongooseError: Operation `users.findOne()` buffering timed out after 10000ms\n' +
    '    at Timeout.<anonymous> (C:\\Projects\\Portfolio\\ai_powered_prompts\\node_modules\\mongoose\\lib\\drivers\\node-mongodb-native\\collection.js:185:23)\n' +
    '    at listOnTimeout (node:internal/timers:569:17)\n' +
    '    at process.processTimers (node:internal/timers:512:7)',
  name: 'MongooseError'
}

Someone having the issue above? When I access the Promptopia home I can't see the posts that users submitted. Minute 2:41:54 of the tutorial.

Did you check your MONGODB_URI ? maybe password uncorrect. I get the same error after update my .env folder it fixed

I had same error and did the following to solve it:

1. Make sure to remove "<" and ">" brackets from MONGODV_URI that surround your password.
2. Make sure your have Built-in Role Privilege to Read and write to any database - in mongobd - Database Access < Select Edit < click Build-in Role < Select Rea and write to any database

IF you cant Sign In and have this error :
MongooseError: Operation users.findOne() buffering timed out after 10000ms

THIS is the Answer:
Remove "<" and ">" from the password on MONGODB_URI inside .env File.
so your username and password should be like this usernane:password

source :
https://stackoverflow.com/questions/60020381/mongodb-atlas-bad-auth-authentication-failed-code-8000

How to solve this error

I have the same error

Hi, did you manage to get the error fixed. I'm facing same issue

your google account name might be shorter than 8 letters and that might be causing the issue

Can someone guide me on this error

@abeel50
There is an empty space after the "sm:" on line 75. That should be like this-
sm:px-16

I guess your code formatter did it. Try changing your settings or use other dedicated code formatter like Prettier.

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 ^^