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

@ethanmorton it works thanks. I tried to switch both of them in the local host didn't work, but it works when I deployed it

Hello everyone, I have been having issues with the jsconfig.json file and global css
jsconfig.json
{
"compilerOptions": {
"paths": {
"@": ["./"]
}
}
}

global.css
jsconfig.json
{
"compilerOptions": {
"paths": {
"@": ["./"]
}
}
}

Is there anything I am doing wrongly?

Hey guys, Please Help!

I've been stuck with this error 3 days I don't know what to do I have been following the tutorial video however I am getting this error

In cases that your username has more than one space character, you will get "Access Denied" error when you are trying to login. You can try editing the route.js in the signIn function. Use global replacement to hit all the space characters. Try this:
username: profile.name.replace(/ /g, "").toLowerCase()

The database share_prompts is not getting created.
My URI and PASSWORD are also exactly correct.

database.js

let isConnected = false; // track connection status
const connectToDB = async () => {
    mongoose.set('strictQuery', true);

    if(isConnected) {
        console.log('MongoDB is already connected.');
        return;
    }
    try {
        await mongoose.connect(process.env.MONGODB_URI, {
            dbName: 'share_prompt',
            useNewUrlParser: true,
            useUnifiedTopology: true,
        })

        isConnected = true;
        console.log('MongoDB connected.');
    } catch (error) {
        console.log(error);
    }
}

export default connectToDB;

route.js:

import NextAuth from "next-auth/next";
import GoogleProvider from "next-auth/providers/google";

import connectToDB from "@utils/database";
import User from "@models/user";

console.log({
  clientId: process.env.GOOGLE_CLIENT_ID,
  clientSecret: process.env.GOOGLE_CLIENT_SECRET,
});

const handler = NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],

  callback: {
    async session({ session }) {
      const sessionUser = await User.findOne({
        email: session.user.email,
      });

      session.user.id = sessionUser._id.toString();

      return session;
    },

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

        // check if user already exists
        const userExists = await User.findOne({
          email: profile.email,
        });

        // if not, create a new user and save it to database
        if (!userExists) {
          await User.create({
            email: profile.email,
            username: profile.name.replace(" ", "").toLowerCase(),
            image: profile.picture,
          });
        }
        return true;

      } catch (err) {
        console.log(error);
        return false;
      }
    },
  },
});

export { handler as GET, handler as POST };

The database share_prompts is not getting created. My URI and PASSWORD are also exactly correct.

database.js

let isConnected = false; // track connection status
const connectToDB = async () => {
    mongoose.set('strictQuery', true);

    if(isConnected) {
        console.log('MongoDB is already connected.');
        return;
    }
    try {
        await mongoose.connect(process.env.MONGODB_URI, {
            dbName: 'share_prompt',
            useNewUrlParser: true,
            useUnifiedTopology: true,
        })

        isConnected = true;
        console.log('MongoDB connected.');
    } catch (error) {
        console.log(error);
    }
}

export default connectToDB;

route.js:

import NextAuth from "next-auth/next";
import GoogleProvider from "next-auth/providers/google";

import connectToDB from "@utils/database";
import User from "@models/user";

console.log({
  clientId: process.env.GOOGLE_CLIENT_ID,
  clientSecret: process.env.GOOGLE_CLIENT_SECRET,
});

const handler = NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],

  callback: {
    async session({ session }) {
      const sessionUser = await User.findOne({
        email: session.user.email,
      });

      session.user.id = sessionUser._id.toString();

      return session;
    },

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

        // check if user already exists
        const userExists = await User.findOne({
          email: profile.email,
        });

        // if not, create a new user and save it to database
        if (!userExists) {
          await User.create({
            email: profile.email,
            username: profile.name.replace(" ", "").toLowerCase(),
            image: profile.picture,
          });
        }
        return true;

      } catch (err) {
        console.log(error);
        return false;
      }
    },
  },
});

export { handler as GET, handler as POST };

OK, it seems that changing from callback to callbacks worked for me.
In the video he said callbacks, but sometime ago it was not working for me, then i changed to callback, then it worked but, was not able to create database in MongoDB.

I followed the youTube video until the end of the 'Homepage' section. After signing in with google, I got the error below

The culprit was with 'next/image' and src={session?.user.image} in the tag.

To resolve this I created a new next.config.js with

/** @type {import('next').NextConfig} */
const nextConfig = {
images: {
remotePatterns: [
{
protocol: 'https',
hostname: "lh3.googleusercontent.com",
},
],
},
};

module.exports = nextConfig;

ref: https://nextjs.org/docs/pages/api-reference/components/image#remotepatterns

Resolved issue

how to solve this error

Hi all,

I get the following error when I try to deploy on Vercel. I have wrapped the useSearchParams() function with suspense boundary but it hasn't worked. Please Help

useSearchParams() should be wrapped in a suspense boundary at page "/update-prompt". Read more: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout

Guys i'm stuck with this error.anybody have a solution to this ⨯ Error: [next-auth]: useSession must be wrapped in a at Nav (./components/Nav.jsx:19:90)

So if you watch the video, you need to add the following code inside Provider.jsx file inside your component folder.

"use client";
import React from "react";
import { SessionProvider } from "next-auth/react";

const Provider = ({ children, session }) => {
  return <SessionProvider session={session}>{children}</SessionProvider>;
};

export default Provider;

and after that inside layout.jsx file inside your create-prompt folder you need to wrap everything inside the body tag with the Provider component as follows.

import React from "react";
import "@styles/globals.css";
import Nav from "@components/Nav";
import Provider from "@components/Provider";

export const metadata = {
  title: "Promptopia",
  description: "Discover & Share prompts",
};

const RootLayout = ({ children }) => {
  return (
    <html lang="en">
      <body>
        <Provider>
          <div className="main">
            <div className="gradient" />
          </div>
          <main className="app">
            <Nav />
            {children}
          </main>
        </Provider>
      </body>
    </html>
  );
};

export default RootLayout;

Hope this solves your issue.

i got some issues in page loading its 404 page not found can you solve this

✓ Starting...
✓ Ready in 3.1s
○ Compiling / ...
⨯ ./styles/globals.css
Syntax error: D:\Full STack Developer\full-stack-next-js-app\styles\globals.css The shadow-[inset_10px_-50px_94px_0_rgb(199, class does not exist. If shadow-[inset_10px_-50px_94px_0_rgb(199, is a custom class, make sure it is defined within a @layer directive. (111:3)

109 |
110 | .copy_btn {

111 | @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;
| ^
112 | }
113 |
-- inner error --
Syntax error: D:\Full STack Developer\full-stack-next-js-app\styles\globals.css The shadow-[inset_10px_-50px_94px_0_rgb(199, class does not exist. If shadow-[inset_10px_-50px_94px_0_rgb(199, is a custom class, make sure it is defined within a @layer directive. (111:3)

109 |
110 | .copy_btn {

111 | @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;
| ^
112 | }
113 |
Generated code for D:\Full STack Developer\full-stack-next-js-app\node_modules\next\dist\build\webpack\loaders\css-loader\src\index.js??ruleSet[1].rules[13].oneOf[12].use[2]!D:\Full STack Developer\full-stack-next-js-app\node_modules\next\dist\build\webpack\loaders\postcss-loader\src\index.js??ruleSet[1].rules[13].oneOf[12].use[3]!D:\Full STack Developer\full-stack-next-js-app\styles\globals.css

Import trace for requested module:
./styles/globals.css
GET / 500 in 1702ms
⨯ ./styles/globals.css
Syntax error: D:\Full STack Developer\full-stack-next-js-app\styles\globals.css The shadow-[inset_10px_-50px_94px_0_rgb(199, class does not exist. If shadow-[inset_10px_-50px_94px_0_rgb(199, is a custom class, make sure it is defined within a @layer directive. (111:3)

109 |
110 | .copy_btn {

111 | @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;
| ^
112 | }
113 |
-- inner error --
Syntax error: D:\Full STack Developer\full-stack-next-js-app\styles\globals.css The shadow-[inset_10px_-50px_94px_0_rgb(199, class does not exist. If shadow-[inset_10px_-50px_94px_0_rgb(199, is a custom class, make sure it is defined within a @layer directive. (111:3)

109 |
110 | .copy_btn {

111 | @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;
| ^
112 | }
113 |
Generated code for D:\Full STack Developer\full-stack-next-js-app\node_modules\next\dist\build\webpack\loaders\css-loader\src\index.js??ruleSet[1].rules[13].oneOf[12].use[2]!D:\Full STack Developer\full-stack-next-js-app\node_modules\next\dist\build\webpack\loaders\postcss-loader\src\index.js??ruleSet[1].rules[13].oneOf[12].use[3]!D:\Full STack Developer\full-stack-next-js-app\styles\globals.css

Import trace for requested module:
./styles/globals.css
GET /_next/static/webpack/2c117a266159ffbc.webpack.hot-update.json 500 in 2265ms
⚠ Fast Refresh had to perform a full reload due to a runtime error.
GET / 200 in 537ms
GET / 500 in 13ms

Guys, anybody have any idea , whats wrong ?? Please help me

✓ Starting... ✓ Ready in 3.1s ○ Compiling / ... ⨯ ./styles/globals.css Syntax error: D:\Full STack Developer\full-stack-next-js-app\styles\globals.css The shadow-[inset_10px_-50px_94px_0_rgb(199, class does not exist. If shadow-[inset_10px_-50px_94px_0_rgb(199, is a custom class, make sure it is defined within a @layer directive. (111:3)

109 | 110 | .copy_btn {

111 | @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;
| ^
112 | }
113 |
-- inner error --
Syntax error: D:\Full STack Developer\full-stack-next-js-app\styles\globals.css The shadow-[inset_10px_-50px_94px_0_rgb(199, class does not exist. If shadow-[inset_10px_-50px_94px_0_rgb(199, is a custom class, make sure it is defined within a @layer directive. (111:3)

109 | 110 | .copy_btn {

111 | @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;
| ^
112 | }
113 |
Generated code for D:\Full STack Developer\full-stack-next-js-app\node_modules\next\dist\build\webpack\loaders\css-loader\src\index.js??ruleSet[1].rules[13].oneOf[12].use[2]!D:\Full STack Developer\full-stack-next-js-app\node_modules\next\dist\build\webpack\loaders\postcss-loader\src\index.js??ruleSet[1].rules[13].oneOf[12].use[3]!D:\Full STack Developer\full-stack-next-js-app\styles\globals.css

Import trace for requested module: ./styles/globals.css GET / 500 in 1702ms ⨯ ./styles/globals.css Syntax error: D:\Full STack Developer\full-stack-next-js-app\styles\globals.css The shadow-[inset_10px_-50px_94px_0_rgb(199, class does not exist. If shadow-[inset_10px_-50px_94px_0_rgb(199, is a custom class, make sure it is defined within a @layer directive. (111:3)

109 | 110 | .copy_btn {

111 | @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;
| ^
112 | }
113 |
-- inner error --
Syntax error: D:\Full STack Developer\full-stack-next-js-app\styles\globals.css The shadow-[inset_10px_-50px_94px_0_rgb(199, class does not exist. If shadow-[inset_10px_-50px_94px_0_rgb(199, is a custom class, make sure it is defined within a @layer directive. (111:3)

109 | 110 | .copy_btn {

111 | @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;
| ^
112 | }
113 |
Generated code for D:\Full STack Developer\full-stack-next-js-app\node_modules\next\dist\build\webpack\loaders\css-loader\src\index.js??ruleSet[1].rules[13].oneOf[12].use[2]!D:\Full STack Developer\full-stack-next-js-app\node_modules\next\dist\build\webpack\loaders\postcss-loader\src\index.js??ruleSet[1].rules[13].oneOf[12].use[3]!D:\Full STack Developer\full-stack-next-js-app\styles\globals.css

Import trace for requested module: ./styles/globals.css GET /_next/static/webpack/2c117a266159ffbc.webpack.hot-update.json 500 in 2265ms ⚠ Fast Refresh had to perform a full reload due to a runtime error. GET / 200 in 537ms GET / 500 in 13ms

Guys, anybody have any idea , whats wrong ?? Please help me

I even tried to comment out this code and again executed npm run dev , still it shows the error

findByIdAndDelete
thank you its resolve my problem

"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/react";

const Nav = () => {
  const {data:session} = useSession();
  const [providers, setProviders] = useState(null);
  const [toggle,setToggle] = useState(false);
  useEffect(() => {
    const setUpProviders = async () => {
      const response = await getProviders();
      // alert(response);
      console.log(response);
      setProviders(response);
      console.log(providers);
    };
    setUpProviders();
  }, []);
  return (
    <div className="w-full flex-between m-2 ">
      <Link href="/">
        <Image
          src="/assets/images/logo.svg"
          alt="logo"
          width={30}
          height={30}
        />
      </Link>
      {/* {alert(providers)} */}
      {/* desktop view */}
      <div className="sm:flex hidden">
        {session?.user ? (
          <div className="flex gap-2">
            <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="/assets/images/logo.svg"
                width={37}
                height={37}
                alt="profile"
              ></Image>
            </Link>
          </div>
        ) : (
          <>
            {providers &&
              Object.values(providers).map((provider) => {
                <button
                  type="button"
                  key={provider.name}
                  onClick={() => signIn(provider.id)}
                >
                  Sign In
                </button>;
              })}
          </>
        )}
      </div >
      {/* mobile view */}
      <div className="sm:hidden relative flex">
        {session?.user ? (<div>
              <Image
                src="/assets/images/logo.svg"
                width={37}
                height={37}
                alt="profile"
                onClick={()=>setToggle((prev)=>!prev)}
              />
              {toggle && (
                <div className="dropdown">
                  <Link
                    href="/profile"
                    className="dropdown_link"
                    onClick={() => setToggle(false)}
                  >
                    Profile
                  </Link>
                  <Link
                    href="/create-prompt"
                    className="dropdown_link"
                    onClick={() => setToggle(false)}
                  >
                    Create Post
                  </Link>
                  <button
                    type="button"
                    onClick={() => {
                      setToggle(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)}
                >
                  Sign In
                </button>;
              })}
          </>
        )}
      </div>
    </div>
  );
};

export default Nav;

Sign in button not showing, pls help.

Hii all,
when i am deploying my project on vercel it is giving me error like below...
Export encountered errors on following paths:
/update-prompt/page: /update-prompt

please help me with that

Hii all, when i am deploying my project on vercel it is giving me error like below... Export encountered errors on following paths: /update-prompt/page: /update-prompt

please help me with that

Hi @Harshitn24 I am stuck with the same error as well I did everything I could to wrap the component that uses the useSearchParams() in suspense boundary and I haven't solved it as well. Lol maybe if we shout! together someone might hear us and help

Hii all, when i am deploying my project on vercel it is giving me error like below... Export encountered errors on following paths: /update-prompt/page: /update-prompt

please help me with that

harshith, I am also facing the same issue, if any updates,please let me know

Hii all, when i am deploying my project on vercel it is giving me error like below... Export encountered errors on following paths: /update-prompt/page: /update-prompt

please help me with that

just go to the next.config.mjs and add the following line in the experimental attribute=> missingSuspenseWithCSRBailout: false

Hii all, when i am deploying my project on vercel it is giving me error like below... Export encountered errors on following paths: /update-prompt/page: /update-prompt
please help me with that

Hi @Harshitn24 I am stuck with the same error as well I did everything I could to wrap the component that uses the useSearchParams() in suspense boundary and I haven't solved it as well. Lol maybe if we shout! together someone might hear us and help

---

The solution to the problem is to warp the (EditPrompt or UpdatePrompt) component with the react 18 Suspense wrapper.

update-prompt/page.jsx

// page.jsx

import { Suspense } from "react";
import dynamic from "next/dynamic";

const EditPrompt = dynamic(() => import("@components/EditPrompt"), {
  suspense: true,
});

const Page = () => {
  return (
    <Suspense>
      <EditPrompt />
    </Suspense>
  );
};

export default Page;

components/EditPormpt

// EditPrompt.jsx

"use client";

import { useState, useEffect } from "react";
import { useRouter, useSearchParams } from "next/navigation";

import Form from "@components/Form";

const EditPrompt = () => {
  const router = useRouter();
  const searchParams = useSearchParams();
  const promptId = searchParams.get("id");

  const [submitting, setSubmitting] = useState(false);
  const [post, setPost] = useState({
    prompt: "",
    tag: "",
  });

  useEffect(() => {
    const getPromptDetails = async () => {
      const response = await fetch(`/api/prompt/${promptId}`);
      const data = await response.json();

      setPost({
        prompt: data.prompt,
        tag: data.tag,
      });
    };

    if (promptId) getPromptDetails();
  }, [promptId]);

  const updatePrompt = async (e) => {
    e.preventDefault();
    setSubmitting(true);

    if (!promptId) return alert("Prompt Id not found!");

    try {
      const response = await fetch(`/api/prompt/${promptId}`, {
        method: "PATCH",
        body: JSON.stringify({
          prompt: post.prompt,
          tag: post.tag,
        }),
      });

      if (response.ok) {
        router.push("/");
      }
    } catch (error) {
      console.log(error);
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <Form
      type="Edit"
      post={post}
      setPost={setPost}
      submitting={submitting}
      handleSubmit={updatePrompt}
    />
  );
};

export default EditPrompt;

Follow: How I solved
I moved the EditPrompt component to the components folder and imported it from there.

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

const Nav = () => {
  const {data:session} = useSession();
  const [providers, setProviders] = useState(null);
  const [toggle,setToggle] = useState(false);
  useEffect(() => {
    const setUpProviders = async () => {
      const response = await getProviders();
      // alert(response);
      console.log(response);
      setProviders(response);
      console.log(providers);
    };
    setUpProviders();
  }, []);
  return (
    <div className="w-full flex-between m-2 ">
      <Link href="/">
        <Image
          src="/assets/images/logo.svg"
          alt="logo"
          width={30}
          height={30}
        />
      </Link>
      {/* {alert(providers)} */}
      {/* desktop view */}
      <div className="sm:flex hidden">
        {session?.user ? (
          <div className="flex gap-2">
            <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="/assets/images/logo.svg"
                width={37}
                height={37}
                alt="profile"
              ></Image>
            </Link>
          </div>
        ) : (
          <>
            {providers &&
              Object.values(providers).map((provider) => {
                <button
                  type="button"
                  key={provider.name}
                  onClick={() => signIn(provider.id)}
                  className="black_btn" <- was missing
                >
                  Sign In
                </button>;
              })}
          </>
        )}
      </div >
      {/* mobile view */}
      <div className="sm:hidden relative flex">
        {session?.user ? (<div>
              <Image
                src="/assets/images/logo.svg"
                width={37}
                height={37}
                alt="profile"
                onClick={()=>setToggle((prev)=>!prev)}
              />
              {toggle && (
                <div className="dropdown">
                  <Link
                    href="/profile"
                    className="dropdown_link"
                    onClick={() => setToggle(false)}
                  >
                    Profile
                  </Link>
                  <Link
                    href="/create-prompt"
                    className="dropdown_link"
                    onClick={() => setToggle(false)}
                  >
                    Create Post
                  </Link>
                  <button
                    type="button"
                    onClick={() => {
                      setToggle(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" <- was missing
                >
                  Sign In
                </button>;
              })}
          </>
        )}
      </div>
    </div>
  );
};

export default Nav;

Sign in button not showing, pls help.

---

@Rishik-Seth

Here Typo

import { useState, useEffect } from `"react";` <- typo here
import { useState, useEffect } from "react";

In providers state conditional rendering missing className='black_btn'

{providers &&
   Object.values(providers).map((provider) => {
      <button
         type="button"
         key={provider.name}
         onClick={() => signIn(provider.id)}
         className="black_btn" <- was missing
        >
        Sign In
       </button>;
})}

My code is working fine. You can look into codes.

You can also look here: Showing Sign-in button

Hii all, when i am deploying my project on vercel it is giving me error like below... Export encountered errors on following paths: /update-prompt/page: /update-prompt
please help me with that

just go to the next.config.mjs and add the following line in the experimental attribute=> missingSuspenseWithCSRBailout: false

---

@krizto8

In next.js documentation, it is not ideal as they say. Next js documentation

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

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

---

@drshshzaman

Check your 'console.cloud' on Google OAuth 2.0, and check for typos. It happened in my case and I was able to solve it.

I implemented your solution and it worked. Thank you! 🙏

…

On Wed, 17 Jul 2024 at 11:40, Yeasin Arafat ***@***.***> wrote: ***@***.**** commented on this gist. ------------------------------ Hii all, when i am deploying my project on vercel it is giving me error like below... Export encountered errors on following paths: /update-prompt/page: /update-prompt please help me with that [image: Screenshot 2024-07-02 183946] <https://private-user-images.githubusercontent.com/125255820/345039986-bd6bb7db-25ff-479d-95fa-9dc230238e2e.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTk5MjgyMDEsIm5iZiI6MTcxOTkyNzkwMSwicGF0aCI6Ii8xMjUyNTU4MjAvMzQ1MDM5OTg2LWJkNmJiN2RiLTI1ZmYtNDc5ZC05NWZhLTlkYzIzMDIzOGUyZS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNzAyJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDcwMlQxMzQ1MDFaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1kNWY1MjFmZTMwZWU3NzRiNDY2MzRlNTQ1MzVhYmFmM2ZkYWQ4OWU2ZDI1ODM5NjMwYWVkNTQ3ZDMyMjRjOGY4JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.03SmEjEl4_1ghPOJi6KUxZZ_CzT9LHoi2O5AFBqZNmw> Hi @Harshitn24 <https://github.com/Harshitn24> I am stuck with the same error as well I did everything I could to wrap the component that uses the useSearchParams() in suspense boundary and I haven't solved it as well. Lol maybe if we shout! together someone might hear us and help [image: error-suspense] <https://private-user-images.githubusercontent.com/25637197/345057598-a42c98ed-11b6-49cb-b6f9-04cf38880652.jpg?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjEyMDgwODgsIm5iZiI6MTcyMTIwNzc4OCwicGF0aCI6Ii8yNTYzNzE5Ny8zNDUwNTc1OTgtYTQyYzk4ZWQtMTFiNi00OWNiLWI2ZjktMDRjZjM4ODgwNjUyLmpwZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MTclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzE3VDA5MTYyOFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTBhMGEzMDcwZjZiNzkzNzlhYjZhOWY0MDBjMTU0MzY5YjczMTE1MGVmZThkODc5ODNiYThkYTQyNDYwZjZjNWImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.yYisI8Y8-8i1tJ2cZ_JMHDG1yVn5ofxwKZ2iEYwyfrs> ------------------------------ The solution to the problem is to warp the (*EditPrompt* or *UpdatePrompt*) component with the react 18 Suspense wrapper. *update-prompt/page.jsx* // page.jsx import { Suspense } from "react"; import dynamic from "next/dynamic"; const EditPrompt = dynamic(() => ***@***.***/EditPrompt"), { suspense: true, }); const Page = () => { return ( <Suspense> <EditPrompt /> </Suspense> ); }; export default Page; *components/EditPormpt* // EditPrompt.jsx "use client"; import { useState, useEffect } from "react"; import { useRouter, useSearchParams } from "next/navigation"; import Form from ***@***.***/Form"; const EditPrompt = () => { const router = useRouter(); const searchParams = useSearchParams(); const promptId = searchParams.get("id"); const [submitting, setSubmitting] = useState(false); const [post, setPost] = useState({ prompt: "", tag: "", }); useEffect(() => { const getPromptDetails = async () => { const response = await fetch(`/api/prompt/${promptId}`); const data = await response.json(); setPost({ prompt: data.prompt, tag: data.tag, }); }; if (promptId) getPromptDetails(); }, [promptId]); const updatePrompt = async (e) => { e.preventDefault(); setSubmitting(true); if (!promptId) return alert("Prompt Id not found!"); try { const response = await fetch(`/api/prompt/${promptId}`, { method: "PATCH", body: JSON.stringify({ prompt: post.prompt, tag: post.tag, }), }); if (response.ok) { router.push("/"); } } catch (error) { console.log(error); } finally { setSubmitting(false); } }; return ( <Form type="Edit" post={post} setPost={setPost} submitting={submitting} handleSubmit={updatePrompt} /> ); }; export default EditPrompt; Follow: How I solved <https://github.com/Y3ASIN/promptopia/blob/main/app/update-prompt/page.jsx> I moved the EditPrompt component to the components folder and imported it from there. — Reply to this email directly, view it on GitHub <https://gist.github.com/adrianhajdin/6df61c6cd5ed052dce814a765bff9032#gistcomment-5124139> or unsubscribe <https://github.com/notifications/unsubscribe-auth/AGDTCTOWLYP3L6MWXRZ5NU3ZMY3ZJBFKMF2HI4TJMJ2XIZLTSKBKK5TBNR2WLJDUOJ2WLJDOMFWWLO3UNBZGKYLEL5YGC4TUNFRWS4DBNZ2F6YLDORUXM2LUPGBKK5TBNR2WLJDHNFZXJJDOMFWWLK3UNBZGKYLEL52HS4DFVRZXKYTKMVRXIX3UPFYGLK2HNFZXIQ3PNVWWK3TUUZ2G64DJMNZZDAVEOR4XAZNEM5UXG5FFOZQWY5LFVEYTEMRSHAYTCNBVU52HE2LHM5SXFJTDOJSWC5DF> . You are receiving this email because you commented on the thread. Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub> .

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

@drshshzaman
Check your 'console.cloud' on Google OAuth 2.0, and check for typos. It happened in my case and I was able to solve it.

I have checked everything triple times but still it doesnt work. i cant even find its fix in the documentation. please help

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

@drshshzaman
Check your 'console.cloud' on Google OAuth 2.0, and check for typos. It happened in my case and I was able to solve it.

I have checked everything triple times but still it doesnt work. i cant even find its fix in the documentation. please help

---

@drshshzaman

Check your api/auth/[...nextauth] route.js
Next Auth route

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

@drshshzaman
Check your 'console.cloud' on Google OAuth 2.0, and check for typos. It happened in my case and I was able to solve it.

I have checked everything triple times but still it doesnt work. i cant even find its fix in the documentation. please help

@drshshzaman
Check your api/auth/[...nextauth] route.js Next Auth route

I have literally copy pasted from the repo and checked three times everything. i cant get it whats wrong.

i have added this line in the end
export { handler as GET, handler as POST };

please tell me the fix. its been two days and i am stuck

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

Would appreciate some help.

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

I think you have to use "use client" at the top of your importing
example:
'use client' import { useSession } from 'next-auth/react' import { useRouter } from 'next/navigation' import {useState, useEffect} from 'react'

After moving the async functions in route.js inside callbacks object, I am getting timed out error

MongooseError: Operation users.findOne() buffering timed out after 10000ms
at Timeout. (/Users/satbose/promptopia/node_modules/mongoose/lib/drivers/node-mongodb-native/collection.js:185:23)
at listOnTimeout (node:internal/timers:573:17)
at process.processTimers (node:internal/timers:514:7)
GET /api/auth/callback/google?state=LtbhGTi_II6RGfOs0fHyFkTPDeU6EJIDAR_yfCfjk_w&code=4%2F0AcvDMrA8ZXoWghvqrxPqWThKv0pwJ3WRSTKrVZa4xeuDXANUZUZoI-nlUeJs-87lqP0LGg&scope=email+profile+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.profile+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email+openid&authuser=0&prompt=none 302 in 10846ms
GET /api/auth/error?error=AccessDenied 403 in 18ms
MongooseError: Operation users.findOne() buffering timed out after 10000ms
at Timeout. (/Users/satbose/promptopia/node_modules/mongoose/lib/drivers/node-mongodb-native/collection.js:185:23)
at listOnTimeout (node:internal/timers:573:17)
at process.processTimers (node:internal/timers:514:7)