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

i am unable to delete the prompt permanently, it deletes initially but when i go back to my feed i still find it there and if i navigate back to my profile also i see it the even after deleting, it comes back

It should be findByIdAndDelete not findByIdAndRemove

i successfully went through the access denied error but when i try to login it says to try with a different account. Can anyone please help. Its been 3hours and i am working on this error

the username in the user.js model is what is causing this error

[next-auth][warn][NEXTAUTH_URL]
https://next-auth.js.org/warnings#nextauth_url
[next-auth][warn][NO_SECRET]
https://next-auth.js.org/warnings#no_secret
GET /api/auth/providers 200 in 389ms
my nav.jsx code is

"use client";
import Link from "next/link";
import Image from "next/image";
import { useEffect, useState } from "react";
import { signIn, signOut, useSession, getProviders } from "next-auth/react";

const Nav = () => {
const { data: session } = useSession();
// if the user is not logged in

const [providers, setProviders] = useState(null);
const [toggleDropdown, setToggleDropdown] = useState(false);



useEffect(() => {
    (async () => {
      const res = await getProviders();
      setProviders(res);
    })();
  }, []);

return (

Promptopia

{/* Desktop Navigation */}

   <div className='sm:flex hidden'>
    {session?.user ?(
        <div className="flex gap-3 md:gap-5">
            <Link href="/create-prompt" className="black_btn">
            create post
            </Link>
            <button type='button' onClick={signOut} className='outline_btn'>
          Sign Out
         </button>
         <Link href='/profile'>
          <Image
            src={session?.user.image}
            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>
          ))}
        </>

    )}

{/* Mobile Navigation */}

{session?.user ? (

setToggleDropdown(!toggleDropdown)} />

        {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;

it is not showing the create post and right icon. please help

@ANGIRAVO

You should recheck the code of next auth. You can follow mine
Also check the Nav component

message: 'client_id is required',
stack: 'TypeError: client_id is required\n' +
' at new BaseClient (webpack-internal:///(rsc)/./node_modules/openid-client/lib/client.js:148:19)\n' +
' at new Client (webpack-internal:///(rsc)/./node_modules/openid-client/lib/client.js:1673:13)\n' +
' at openidClient (webpack-internal:///(rsc)/./node_modules/next-auth/core/lib/oauth/client.js:29:18)\n' +
' at process.processTicksAndRejections (node:internal/process/task_queues:95:5)\n' +
' at async getAuthorizationUrl (webpack-internal:///(rsc)/./node_modules/next-auth/core/lib/oauth/authorization-url.js:70:18)\n' +
' at async Object.signin (webpack-internal:///(rsc)/./node_modules/next-auth/core/routes/signin.js:38:24)\n' +
' at async AuthHandler (webpack-internal:///(rsc)/./node_modules/next-auth/core/index.js:260:26)\n' +
' at async NextAuthRouteHandler (webpack-internal:///(rsc)/./node_modules/next-auth/next/index.js:69:28)\n' +
' at async NextAuth._args$ (webpack-internal:///(rsc)/./node_modules/next-auth/next/index.js:105:16)\n' +
' at async C:\Users\angir\OneDrive\Desktop\promptopia\node_modules\next\dist\compiled\next-server\app-route.runtime.dev.js:6:55755\n' +
' at async eO.execute (C:\Users\angir\OneDrive\Desktop\promptopia\node_modules\next\dist\compiled\next-server\app-route.runtime.dev.js:6:46523)\n' +
' at async eO.handle (C:\Users\angir\OneDrive\Desktop\promptopia\node_modules\next\dist\compiled\next-server\app-route.runtime.dev.js:6:57089)\n' +
' at async doRender (C:\Users\angir\OneDrive\Desktop\promptopia\node_modules\next\dist\server\base-server.js:1359:42)\n' +
' at async cacheEntry.responseCache.get.routeKind (C:\Users\angir\OneDrive\Desktop\promptopia\node_modules\next\dist\server\base-server.js:1569:40)\n' +
' at async DevServer.renderToResponseWithComponentsImpl (C:\Users\angir\OneDrive\Desktop\promptopia\node_modules\next\dist\server\base-server.js:1489:28)\n' +
' at async DevServer.renderPageComponent (C:\Users\angir\OneDrive\Desktop\promptopia\node_modules\next\dist\server\base-server.js:1920:24)\n' +
' at async DevServer.renderToResponseImpl (C:\Users\angir\OneDrive\Desktop\promptopia\node_modules\next\dist\server\base-server.js:1958:32)\n' +
' at async DevServer.pipeImpl (C:\Users\angir\OneDrive\Desktop\promptopia\node_modules\next\dist\server\base-server.js:917:25)\n' +
' at async NextNodeServer.handleCatchallRenderRequest (C:\Users\angir\OneDrive\Desktop\promptopia\node_modules\next\dist\server\next-server.js:272:17)\n' +
' at async DevServer.handleRequestImpl (C:\Users\angir\OneDrive\Desktop\promptopia\node_modules\next\dist\server\base-server.js:813:17)\n' +
' at async C:\Users\angir\OneDrive\Desktop\promptopia\node_modules\next\dist\server\dev\next-dev-server.js:339:20\n' +
' at async Span.traceAsyncFn (C:\Users\angir\OneDrive\Desktop\promptopia\node_modules\next\dist\trace\trace.js:154:20)\n' +
' at async DevServer.handleRequest (C:\Users\angir\OneDrive\Desktop\promptopia\node_modules\next\dist\server\dev\next-dev-server.js:336:24)\n' +
' at async invokeRender (C:\Users\angir\OneDrive\Desktop\promptopia\node_modules\next\dist\server\lib\router-server.js:173:21)\n' +
' at async handleRequest (C:\Users\angir\OneDrive\Desktop\promptopia\node_modules\next\dist\server\lib\router-server.js:350:24)\n' +
' at async requestHandlerImpl (C:\Users\angir\OneDrive\Desktop\promptopia\node_modules\next\dist\server\lib\router-server.js:374:13)\n' +
' at async Server.requestListener (C:\Users\angir\OneDrive\Desktop\promptopia\node_modules\next\dist\server\lib\start-server.js:141:13)',
name: 'TypeError'
},
providerId: 'google',
message: 'client_id is required'
}
POST /api/auth/signin/google 302 in 131ms
GET /api/auth/error?error=OAuthSignin 302 in 12ms
[next-auth][error][SIGNIN_OAUTH_ERROR]
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:///(rsc)/./node_modules/openid-client/lib/client.js:148:19)\n' +
' at new Client (webpack-internal:///(rsc)/./node_modules/openid-client/lib/client.js:1673:13)\n' +
' at openidClient (webpack-internal:///(rsc)/./node_modules/next-auth/core/lib/oauth/client.js:29:18)\n' +
' at process.processTicksAndRejections (node:internal/process/task_queues:95:5)\n' +
' at async getAuthorizationUrl (webpack-internal:///(rsc)/./node_modules/next-auth/core/lib/oauth/authorization-url.js:70:18)\n' +
' at async Object.signin (webpack-internal:///(rsc)/./node_modules/next-auth/core/routes/signin.js:38:24)\n' +
' at async AuthHandler (webpack-internal:///(rsc)/./node_modules/next-auth/core/index.js:260:26)\n' +
' at async NextAuthRouteHandler (webpack-internal:///(rsc)/./node_modules/next-auth/next/index.js:69:28)\n' +
' at async NextAuth._args$ (webpack-internal:///(rsc)/./node_modules/next-auth/next/index.js:105:16)\n' +
' at async C:\Users\angir\OneDrive\Desktop\promptopia\node_modules\next\dist\compiled\next-server\app-route.runtime.dev.js:6:55755\n' +
' at async eO.execute (C:\Users\angir\OneDrive\Desktop\promptopia\node_modules\next\dist\compiled\next-server\app-route.runtime.dev.js:6:46523)\n' +
' at async eO.handle (C:\Users\angir\OneDrive\Desktop\promptopia\node_modules\next\dist\compiled\next-server\app-route.runtime.dev.js:6:57089)\n' +
' at async doRender (C:\Users\angir\OneDrive\Desktop\promptopia\node_modules\next\dist\server\base-server.js:1359:42)\n' +
' at async cacheEntry.responseCache.get.routeKind (C:\Users\angir\OneDrive\Desktop\promptopia\node_modules\next\dist\server\base-server.js:1569:40)\n' +
' at async DevServer.renderToResponseWithComponentsImpl (C:\Users\angir\OneDrive\Desktop\promptopia\node_modules\next\dist\server\base-server.js:1489:28)\n' +
' at async DevServer.renderPageComponent (C:\Users\angir\OneDrive\Desktop\promptopia\node_modules\next\dist\server\base-server.js:1920:24)\n' +
' at async DevServer.renderToResponseImpl (C:\Users\angir\OneDrive\Desktop\promptopia\node_modules\next\dist\server\base-server.js:1958:32)\n' +
' at async DevServer.pipeImpl (C:\Users\angir\OneDrive\Desktop\promptopia\node_modules\next\dist\server\base-server.js:917:25)\n' +
' at async NextNodeServer.handleCatchallRenderRequest (C:\Users\angir\OneDrive\Desktop\promptopia\node_modules\next\dist\server\next-server.js:272:17)\n' +
' at async DevServer.handleRequestImpl (C:\Users\angir\OneDrive\Desktop\promptopia\node_modules\next\dist\server\base-server.js:813:17)\n' +
' at async C:\Users\angir\OneDrive\Desktop\promptopia\node_modules\next\dist\server\dev\next-dev-server.js:339:20\n' +
' at async Span.traceAsyncFn (C:\Users\angir\OneDrive\Desktop\promptopia\node_modules\next\dist\trace\trace.js:154:20)\n' +
' at async DevServer.handleRequest (C:\Users\angir\OneDrive\Desktop\promptopia\node_modules\next\dist\server\dev\next-dev-server.js:336:24)\n' +
' at async invokeRender (C:\Users\angir\OneDrive\Desktop\promptopia\node_modules\next\dist\server\lib\router-server.js:173:21)\n' +
' at async handleRequest (C:\Users\angir\OneDrive\Desktop\promptopia\node_modules\next\dist\server\lib\router-server.js:350:24)\n' +
' at async requestHandlerImpl (C:\Users\angir\OneDrive\Desktop\promptopia\node_modules\next\dist\server\lib\router-server.js:374:13)\n' +
' at async Server.requestListener (C:\Users\angir\OneDrive\Desktop\promptopia\node_modules\next\dist\server\lib\start-server.js:141:13)',
name: 'TypeError'
},
providerId: 'google',
message: 'client_id is required'
}
POST /api/auth/signin/google 302 in 114ms
GET /api/auth/error?error=OAuthSignin 302 in 11ms
GET /api/auth/signin?error=OAuthSignin 200 in 15ms
[next-auth][error][SIGNIN_OAUTH_ERROR]
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:///(rsc)/./node_modules/openid-client/lib/client.js:148:19)\n' +
' at new Client (webpack-internal:///(rsc)/./node_modules/openid-client/lib/client.js:1673:13)\n' +
' at openidClient (webpack-internal:///(rsc)/./node_modules/next-auth/core/lib/oauth/client.js:29:18)\n' +
' at process.processTicksAndRejections (node:internal/process/task_queues:95:5)\n' +
' at async getAuthorizationUrl (webpack-internal:///(rsc)/./node_modules/next-auth/core/lib/oauth/authorization-url.js:70:18)\n' +
' at async Object.signin (webpack-internal:///(rsc)/./node_modules/next-auth/core/routes/signin.js:38:24)\n' +
' at async AuthHandler (webpack-internal:///(rsc)/./node_modules/next-auth/core/index.js:260:26)\n' +
' at async NextAuthRouteHandler (webpack-internal:///(rsc)/./node_modules/next-auth/next/index.js:69:28)\n' +
' at async NextAuth._args$ (webpack-internal:///(rsc)/./node_modules/next-auth/next/index.js:105:16)\n' +
' at async C:\Users\angir\OneDrive\Desktop\promptopia\node_modules\next\dist\compiled\next-server\app-route.runtime.dev.js:6:55755\n' +
' at async eO.execute (C:\Users\angir\OneDrive\Desktop\promptopia\node_modules\next\dist\compiled\next-server\app-route.runtime.dev.js:6:46523)\n' +
' at async eO.handle (C:\Users\angir\OneDrive\Desktop\promptopia\node_modules\next\dist\compiled\next-server\app-route.runtime.dev.js:6:57089)\n' +
' at async doRender (C:\Users\angir\OneDrive\Desktop\promptopia\node_modules\next\dist\server\base-server.js:1359:42)\n' +
' at async cacheEntry.responseCache.get.routeKind (C:\Users\angir\OneDrive\Desktop\promptopia\node_modules\next\dist\server\base-server.js:1569:40)\n' +
' at async DevServer.renderToResponseWithComponentsImpl (C:\Users\angir\OneDrive\Desktop\promptopia\node_modules\next\dist\server\base-server.js:1489:28)\n' +
' at async DevServer.renderPageComponent (C:\Users\angir\OneDrive\Desktop\promptopia\node_modules\next\dist\server\base-server.js:1920:24)\n' +
' at async DevServer.renderToResponseImpl (C:\Users\angir\OneDrive\Desktop\promptopia\node_modules\next\dist\server\base-server.js:1958:32)\n' +
' at async DevServer.pipeImpl (C:\Users\angir\OneDrive\Desktop\promptopia\node_modules\next\dist\server\base-server.js:917:25)\n' +
' at async NextNodeServer.handleCatchallRenderRequest (C:\Users\angir\OneDrive\Desktop\promptopia\node_modules\next\dist\server\next-server.js:272:17)\n' +
' at async DevServer.handleRequestImpl (C:\Users\angir\OneDrive\Desktop\promptopia\node_modules\next\dist\server\base-server.js:813:17)\n' +
' at async C:\Users\angir\OneDrive\Desktop\promptopia\node_modules\next\dist\server\dev\next-dev-server.js:339:20\n' +
' at async Span.traceAsyncFn (C:\Users\angir\OneDrive\Desktop\promptopia\node_modules\next\dist\trace\trace.js:154:20)\n' +
' at async DevServer.handleRequest (C:\Users\angir\OneDrive\Desktop\promptopia\node_modules\next\dist\server\dev\next-dev-server.js:336:24)\n' +
' at async invokeRender (C:\Users\angir\OneDrive\Desktop\promptopia\node_modules\next\dist\server\lib\router-server.js:173:21)\n' +
' at async handleRequest (C:\Users\angir\OneDrive\Desktop\promptopia\node_modules\next\dist\server\lib\router-server.js:350:24)\n' +
' at async requestHandlerImpl (C:\Users\angir\OneDrive\Desktop\promptopia\node_modules\next\dist\server\lib\router-server.js:374:13)\n' +
' at async Server.requestListener (C:\Users\angir\OneDrive\Desktop\promptopia\node_modules\next\dist\server\lib\start-server.js:141:13)',
name: 'TypeError'
},
providerId: 'google',
message: 'client_id is required'
}
POST /api/auth/signin/google 302 in 115ms
GET /api/auth/error?error=OAuthSignin 302 in 11ms
GET /api/auth/signin?error=OAuthSignin 200 in 11ms i have correctly done the google outh part still it is showing this evrytime and i could not sign in

I got an error while working on PromptCard.jsx (at youtube 2:24:42).
I think this problem applies to
{post.creator.image}
{post.creator.username}
{post.creator.email}

I would appreciate some help 😊

@DwiPriyatmoko

Try adding optional chaining like this

{post?.creator?.image}
{post?.creator?.username}
{post?.creator?.email}

@DwiPriyatmoko

Try adding optional chaining like this

{post?.creator?.image}
{post?.creator?.username}
{post?.creator?.email}

I was using this technique, but in the end, it caused some issues, bro.

Hello everyone. I´ve been having this issue and don´t know how to fix it. Would appreciate some help.

Hello pls if u solve the problem tell how to do because i have the same error

where is the next.config.mjs ?

I faced an "Access Denied" error while implementing NextAuth with Google sign-in, which was quite frustrating. After some investigation, I found that the issue was related to how I was handling the session and sign-in callbacks.

The root cause was that I wasn't returning the modified session object in the session callback. This caused the client to fail to fetch the session data properly, resulting in the error.

here is the error:

and the localhost had:

To resolve this, I made the following changes:

Returned the Session: In the session callback, I ensured to return the modified session object after setting the user ID.
Improved Error Handling: I added logging in both the session and signIn callbacks to capture any errors that occurred during these processes.
With these adjustments, the "Access Denied" error was resolved, and the sign-in flow is now working smoothly.

Here’s a code snippet that solved the error:

route.js

import NextAuth from "next-auth";
import GoogleProvider from 'next-auth/providers/google';
import User from "@models/user";
import { connectToDB } from "@utils/databasse";

const handler = NextAuth({
debug: true,
providers: [
GoogleProvider({
clientId: process.env.GOOGLE_ID,
clientSecret: process.env.GOOGLE_CLIENT_SECRET,
})
],
callbacks: {
async session({ session }) {
try {
const sessionUser = await User.findOne({
email: session.user.email
});

            if (sessionUser) {
                session.user.id = sessionUser._id.toString();
            }
            
            return session; // Return the modified session
        } catch (error) {
            console.error("Session callback error:", error);
            return session; // Return original session in case of error
        }
    },
    async signIn({ profile }) {
        try {
            await connectToDB();
    
            const userExists = await User.findOne({ 
                email: profile.email, 
            });
    
            if (!userExists) {
                await User.create({
                    email: profile.email,
                    username: profile.name.replace(/\s/g, "").toLowerCase(), // Replace spaces
                    image: profile.picture
                });
            }
    
            return true; // Successful sign-in
        } catch (error) {
            console.error("Error during sign-in:", error);
            return false; // This will cause an "Access Denied" message
        }
    }
},

});

export { handler as GET, handler as POST };

database.js

import mongoose from "mongoose";

let isConnected = false;

export const connectToDB = async () => {
mongoose.set('strictQuery', true); // Use strict query mode

if (isConnected) {
    console.log('MongoDB is already connected');
    return;
}

try {
    await mongoose.connect(process.env.MONGODB_URI, {
        dbName: "promptgenius", // Ensure this matches your MongoDB setup
        // Removed deprecated options
    });

    isConnected = true;
    console.log("MongoDB connected successfully");
} catch (error) {
    console.error("Error connecting to MongoDB:", error); // Log any connection errors
    throw new Error('MongoDB connection failed'); // Rethrow for handling
}

};
With these changes, my implementation is now working as expected. Thank you for your help!

Thanks for the update

Hi Guys this is the build-error I recieved when trying to deploy the app to vercel. How I can resolve this? your assistance will be highly appreciated..

here is the build error:

at u (/vercel/path0/.next/server/app/api/prompt/route.js:1:564)
at /vercel/path0/node_modules/next/dist/compiled/next-server/app-route.runtime.prod.js:6:36963
at /vercel/path0/node_modules/next/dist/server/lib/trace/tracer.js:140:36
at NoopContextManager.with (/vercel/path0/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:7062)
at ContextAPI.with (/vercel/path0/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:518)
at NoopTracer.startActiveSpan (/vercel/path0/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:18093)

Generating static pages (4/9)
Generating static pages (6/9)
⨯ useSearchParams() should be wrapped in a suspense boundary at page "/update-prompt". Read more: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout
at a (/vercel/path0/.next/server/chunks/494.js:1:31244)
at c (/vercel/path0/.next/server/chunks/494.js:1:42184)
at i (/vercel/path0/.next/server/app/update-prompt/page.js:1:2082)
at nj (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:46251)
at nM (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:47571)
at nN (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64546)
at nI (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:47010)
at nM (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:47717)
at nM (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:61546)
at nN (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64546)
Error occurred prerendering page "/update-prompt". Read more: https://nextjs.org/docs/messages/prerender-error
✓ Generating static pages (9/9)

Export encountered errors on following paths:
/update-prompt/page: /update-prompt
Error: Command "npm run build" exited with 1

where is the next.config.mjs ?

https://github.com/adrianhajdin/project_next_14_ai_prompt_sharing/blob/main/next.config.js

can anyone help me out with this one ...! (TypeError: Cannot read properties of undefined (reading 'image')
at PromptCard (webpack-internal:///(app-pages-browser)/./components/PromptCard.jsx:46:51)
at react-stack-bottom-frame (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:22349:20)
at renderWithHooks (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:5740:22)
at updateFunctionComponent (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:8001:19)
at beginWork (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:9666:18)
at runWithFiberInDEV (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:544:16)
at performUnitOfWork (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:14997:22)
at workLoopSync (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:14827:41)
at renderRootSync (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:14807:11)
at performWorkOnRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:14342:44)
at performWorkOnRootViaSchedulerTask (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:15853:7)
at MessagePort.performWorkUntilDeadline (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js:44:48)

)

Make sure to have a return true statement at the end of your async signIn function. This might help solve an access denied error. That way the server knows to log the user in after creation.

async signIn({ profile }) {
try {
await connectToDB();

        const userExists = await User.findOne({
            email: profile.email
        })

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

        return true;

Hello everyone. I´ve been having this issue and don´t know how to fix it. Would appreciate some help.

Hello pls if u solve the problem tell how to do because i have the same error

Check your MongoDB database, for any prompts that are missing the creator key/field and delete those prompts

MongoParseError: option usenewurlparse is not supported
at parseOptions (/home/nzabanita/WebstormProjects/share_prompts/node_modules/mongodb/lib/connection_string.js:278:15)
at new MongoClient (/home/nzabanita/WebstormProjects/share_prompts/node_modules/mongodb/lib/mongo_client.js:65:61)
at NativeConnection.createClient (/home/nzabanita/WebstormProjects/share_prompts/node_modules/mongoose/lib/drivers/node-mongodb-native/connection.js:343:14)
at NativeConnection.openUri (/home/nzabanita/WebstormProjects/share_prompts/node_modules/mongoose/lib/connection.js:1071:34)
at Mongoose.connect (/home/nzabanita/WebstormProjects/share_prompts/node_modules/mongoose/lib/mongoose.js:450:15)
at connectToDB (webpack-internal:///(rsc)/./utils/database.js:16:63)
at Object.signIn (webpack-internal:///(rsc)/./app/api/auth/[...nextauth]/route.js:32:83)
at Object.callback (webpack-internal:///(rsc)/./node_modules/next-auth/core/routes/callback.js:49:55)
at async AuthHandler (webpack-internal:///(rsc)/./node_modules/next-auth/core/index.js:186:38)
at async NextAuthRouteHandler (webpack-internal:///(rsc)/./node_modules/next-auth/next/index.js:50:30)
at async NextAuth._args$ (webpack-internal:///(rsc)/./node_modules/next-auth/next/index.js:85:24)
at async /home/nzabanita/WebstormProjects/share_prompts/node_modules/next/dist/compiled/next-server/app-route.runtime.dev.js:6:62500 {
errorLabelSet: Set(0) {}
}
Error checking if user exists: Operation users.findOne() buffering timed out after 10000ms

i am stuck on this error has anyone fixed it who can help me?

Good evening everyone, i f there is any one who can help me here it will be nice

'use client'
import {useState} from "react";
import Image from "next/image";
import {useSession} from "next-auth/react";
import {usePathname, useRouter} from "next/navigation";

const PromptCard = ({post, handleTagClick, handleEdit, handleDelete}) => {
const [copied, setCopied] = useState('');

return (
    <div className="prompt_card">
        <div className='flex justify-between items-start gap-5'>
            <div className="flex-1 flex justify-start items-center gap-3 cursor-pointer">
                <Image
                    src={post.creator.image}
                    alt='user_image'
                    width={40}
                    height={40}
                    className="rounded-full object-contain"
                />
                <div className="flex flex-col">
                    <h3 className="font-satoshi font-semibold text-gray-900">
                        {post.creator.username}
                    </h3>
                    <p className="font-satoshi text-sm text-gray-500">
                        {post.creator.email}
                    </p>
                </div>
            </div>

            <div className="copy_btn" onClick={()=>{}}>
                <Image
                    src={copied === post.prompt ? '/assets/icons/tick.svg':'/assets/icons/copy.svg'}
                    width={20}
                    height={20}
                    alt=""
                />
            </div>
        </div>
        <p className="my-4 font-satoshi text-sm text-gray-700">
            {post.prompt}
        </p>
        <p className="font-inter text-sm blue_gradient cursor-pointer">
            {post.tag}
        </p>
    </div>
)

}
export default PromptCard

what should i do to fix the error?

hiii @paladin-2024 the issue you are facing is post.creator.image is undefined is due to the reason.

in your post.creator object you not getting the image key, so here you need to handle like:

{post?.creator?.image && "Your Image Component here"}

            This would ensure that image would be render only if there is post.creator.image (Available.) else it won't print and you won't be having any run time error now. 

Hope this addressed your issue:)

Hello, I am just starting out with the project but i cant get tailwind to work particularly in my page.jsx folder what do i do?

could you check if your tailwind is installed properly? and if you using Tailwind 4.0 make sure you have import in css file like:

@import 'tailwindcss';
and make sure you import the CSS file to you r project in which you have imported tailwind.

ELSE:
try uninstall the tailiwind and re install the same, by following 4.0 docs.

it would start working.

I have done all this though and it is not working. Here is a screenshot of my codes

I got same issue few days back, I removed the styles from folder and added it to app directly. it got fixed for me:)

I got same issue few days back, I removed the styles from folder and added it to app directly. it got fixed for me:)

Thank you for the help so far. Please can you send screenshots of how you did it. I still couldnt figure it out. Thank you

I figured it out, thank you. I had to make adjustment to the globals.css file based on the new tailwind 4 specifications.