-
-
Save adrianhajdin/6df61c6cd5ed052dce814a765bff9032 to your computer and use it in GitHub Desktop.
@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; | |
} |
{ | |
"compilerOptions": { | |
"paths": { | |
"@*": ["./*"] | |
} | |
} | |
} |
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 }); | |
} | |
}; |
/** @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: [], | |
} |
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!"] | |
}, |
Hi, I'm having trouble with this error:
Unhandled Runtime Error Error: [next-auth]:
useSession
must be wrapped in a<SessionProvider />
Has anyone else encountered this? How did you resolve it? I checked the NextAuth.js documentation and have added the following but it still gives me the same error:
Configure Shared session state To be able to use
useSession
first you'll need to expose the session context,<SessionProvider />
, at the top level of your application:pages/_app.jsx `import { SessionProvider } from "next-auth/react"
export default function App({ Component, pageProps: { session, ...pageProps }, }) { return ( <Component {...pageProps} /> ) }`
Am I missing something? Any help would be appreciated, thanks.
Hey there, even i encountered this error while watching the tutorial , after spending an hour of debugging I found out that I was only missing a " ; " 😢 at the line "export default Provider" in the file Providers.jsx , it worked out for me , just check if it works for you.
After adding the Provider around the {children}, in the layout.js, I receive an error:
Error: Objects are not valid as a React child (found: object with keys {children}). If you meant to render a collection of children, use an array instead.
The Provider.js looks as following:
"use client" ;
import { SessionProvider } from 'next-auth/react';
const Provider = (children, session) => {
return (
<SessionProvider session={session}>
{children}
</SessionProvider>
)
}
export default Provider
the layout.js looks as following:
import "./globals.css";
import Nav from "./Nav.js"
import Provider from "@/components/Provider";
export const metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
const RootLayout = ({children}) => {
return (
<html lang="en">
<body >
<Provider>
<Nav></Nav>
{children}
</Provider>
</body>
</html>
)
}
export default RootLayout;
Module not found: Can't resolve '@styles/globals.css'
1 | import '@styles/globals.css';
2 | import { Children } from 'react';
3 |
4 | export const metadata = {https://nextjs.org/docs/messages/module-not-found ⨯ ./app/layout.jsx:1:0 Module not found: Can't resolve '@styles/globals.css'
1 | import '@styles/globals.css';
2 | import { Children } from 'react';
3 |
4 | export const metadata = {https://nextjs.org/docs/messages/module-not-found
warn - No utility classes were detected in your source files. If this is unexpected, double-check the
content
option in your Tailwind CSS configuration. warn - https://tailwindcss.com/docs/content-configuration ⨯ ./styles/globals.css:75:5 Syntax error: C:\Users\kamal\OneDrive\Desktop\Project 101\Newer Projects\prompty\styles\globals.css Thesm:
class does not exist. Ifsm:
is a custom class, make sure it is defined within a@layer
directive.73 | 74 | .app {
75 | @apply relative z-10 flex justify-center items-center flex-col max-w-7xl mx-auto sm: px-16 px-6;
| ^
76 | }
77 |
⚠ Fast Refresh had to perform a full reload due to a runtime error.
[webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|C:\Users\kamal\OneDrive\Desktop\Project 101\Newer Projects\prompty\node_modules\next\dist\build\webpack\loaders\css-loader\src\index.js??ruleSet[1].rules[11].oneOf[12].use[2]!C:\Users\kamal\OneDrive\Desktop\Project 101\Newer Projects\prompty\node_modules\next\dist\build\webpack\loaders\postcss-loader\src\index.js??ruleSet[1].rules[11].oneOf[12].use[3]!C:\Users\kamal\OneDrive\Desktop\Project 101\Newer Projects\prompty\styles\globals.css': No serializer registered for PostCSSSyntaxError
while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> webpack/lib/NormalModule -> webpack/lib/ModuleBuildError -> PostCSSSyntaxErrori get this error in every next project, i even tried using the exact next js version he used and still there is this error!!!!! in the previous project also when i copied the globals.css it gave me the same error, and i think its a very small error, can anyone help me with this?
{ "compilerOptions": { "paths": { "@*": ["./*"] } } }
make sure your jsconfig.json look like this
I'm using TypeScript and the compiler tells me "useNewUrlParser" does not exists on type ConnectionOptions.
Then, I look up StackOverflow, and find someone mention that the useNewUrlParser and useUnifiedTopology is no longer needed after mongoose 6.0
useNewUrlParser, useUnifiedTopology, useFindAndModify, and useCreateIndex are no longer supported options. Mongoose 6 always behaves as if useNewUrlParser, useUnifiedTopology, and useCreateIndex are true, and useFindAndModify is false. Please remove these options from your code.
any body facing this same error in vercel deployment ?
How did you resolve it?I faced the same error while deploying on Vercel. I managed to get it fixed by wrapping the UpdatePrompt component in Suspense. Attaching the link to my project's update-prompt/page.jsx for reference below:
https://github.com/maryam-nasir/intelli-prompts/blob/master/app/update-prompt/page.jsx
It worked like a charm!! I really appreciate your assistance. Thank you so much!
Module not found: Can't resolve '@styles/globals.css'
1 | import '@styles/globals.css';
2 | import { Children } from 'react';
3 |
4 | export const metadata = {https://nextjs.org/docs/messages/module-not-found ⨯ ./app/layout.jsx:1:0 Module not found: Can't resolve '@styles/globals.css'
1 | import '@styles/globals.css';
2 | import { Children } from 'react';
3 |
4 | export const metadata = {https://nextjs.org/docs/messages/module-not-found
warn - No utility classes were detected in your source files. If this is unexpected, double-check thecontent
option in your Tailwind CSS configuration. warn - https://tailwindcss.com/docs/content-configuration ⨯ ./styles/globals.css:75:5 Syntax error: C:\Users\kamal\OneDrive\Desktop\Project 101\Newer Projects\prompty\styles\globals.css Thesm:
class does not exist. Ifsm:
is a custom class, make sure it is defined within a@layer
directive.
73 | 74 | .app {75 | @apply relative z-10 flex justify-center items-center flex-col max-w-7xl mx-auto sm: px-16 px-6;
| ^
76 | }
77 |
⚠ Fast Refresh had to perform a full reload due to a runtime error.
[webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|C:\Users\kamal\OneDrive\Desktop\Project 101\Newer Projects\prompty\node_modules\next\dist\build\webpack\loaders\css-loader\src\index.js??ruleSet[1].rules[11].oneOf[12].use[2]!C:\Users\kamal\OneDrive\Desktop\Project 101\Newer Projects\prompty\node_modules\next\dist\build\webpack\loaders\postcss-loader\src\index.js??ruleSet[1].rules[11].oneOf[12].use[3]!C:\Users\kamal\OneDrive\Desktop\Project 101\Newer Projects\prompty\styles\globals.css': No serializer registered for PostCSSSyntaxError
while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> webpack/lib/NormalModule -> webpack/lib/ModuleBuildError -> PostCSSSyntaxErrori get this error in every next project, i even tried using the exact next js version he used and still there is this error!!!!! in the previous project also when i copied the globals.css it gave me the same error, and i think its a very small error, can anyone help me with this?
{ "compilerOptions": { "paths": { "@*": ["./*"] } } }
make sure your jsconfig.json look like this
@silent-kid
Hello! I had the same issue and I managed to solve it by wrapping all 'custom' CSS classes in globals.css @layer utilities { .... classes here }
You can look at the image:
https://drive.google.com/file/d/1uF7qobfbKvx8R7ZGc8sBUdD4U_puagY3/view?usp=sharing
I hope this will help you too :)
When I run npm run dev and check my website on the local server, everything looks good. The data shows up fine, and if I tweak things in MongoDB, my local site updates accordingly. But here's the problem – when I deploy it to Vercel, even though I set up everything right, the data doesn't update. I did all the ENV variable stuff, deployment went well, and the data is there, but if I make changes in MongoDB afterward, my site on Vercel doesn't reflect those changes. It just sticks with the initial data, and it only appears if I redeploy the project.
Hey @hasanBafuleh , having the same issue, have you got any clue on how to resolve this?
When I run npm run dev and check my website on the local server, everything looks good. The data shows up fine, and if I tweak things in MongoDB, my local site updates accordingly. But here's the problem – when I deploy it to Vercel, even though I set up everything right, the data doesn't update. I did all the ENV variable stuff, deployment went well, and the data is there, but if I make changes in MongoDB afterward, my site on Vercel doesn't reflect those changes. It just sticks with the initial data, and it only appears if I redeploy the project.
Hey @hasanBafuleh , having the same issue, have you got any clue on how to resolve this?
Yes, The problem is with how Vercel deals with the '/api/prompt' route in ISR, and it doesn't update properly. To fix this, we want to move it out of ISR. To do that, just add 'revalidate=0' inside the '/api/prompt/route.js' file like this:
import Prompt from "@models/prompt";
import { connectToDB } from "@utils/database";
export const revalidate = 0;
export const GET = async (request) => {......}
When I run npm run dev and check my website on the local server, everything looks good. The data shows up fine, and if I tweak things in MongoDB, my local site updates accordingly. But here's the problem – when I deploy it to Vercel, even though I set up everything right, the data doesn't update. I did all the ENV variable stuff, deployment went well, and the data is there, but if I make changes in MongoDB afterward, my site on Vercel doesn't reflect those changes. It just sticks with the initial data, and it only appears if I redeploy the project.
Hey @hasanBafuleh , having the same issue, have you got any clue on how to resolve this?
Yes, The problem is with how Vercel deals with the '/api/prompt' route in ISR, and it doesn't update properly. To fix this, we want to move it out of ISR. To do that, just add 'revalidate=0' inside the '/api/prompt/route.js' file like this:
import Prompt from "@models/prompt"; import { connectToDB } from "@utils/database";
export const revalidate = 0;
export const GET = async (request) => {......}
Hey, it's working, thanks @hasanBafuleh!
Hi did anyone got this error?? and if you have resolved it, please pass the solutions.
I have done everything. but again and again got this error..
Nav.jsx:15 [next-auth][error][CLIENT_FETCH_ERROR] https://next-auth.js.org/errors#client_fetch_error Unexpected token '<', "<!DOCTYPE "... is not valid JSON {error: {…}, url: '/api/auth/providers', message:
Unexpected token '<', "<!DOCTYPE "... is not valid JSON} logger.js:92 POST http://localhost:3000/api/auth/_log 404 (Not Found) Nav.jsx:15 POST http://localhost:3000/api/auth/_log 404 (Not Found) logger.js:92 POST http://localhost:3000/api/auth/_log 404 (Not Found) Nav.jsx:15 POST http://localhost:3000/api/auth/_log 404 (Not Found)
app-index.js:35 [next-auth][error][CLIENT_FETCH_ERROR] https://next-auth.js.org/errors#client_fetch_error Unexpected token '<', "<!DOCTYPE "... is not valid JSON {error: {…}, url: '/api/auth/session', message:
Unexpected token '<', "<!DOCTYPE "... is not valid JSON}
@NarendranKT I also faced the same issue but then I resolved it. This issue occurs due to the wrong directory location of "api" folder.
Do let me know if you're using "src" folder structure or 'app' folder structure.
I'm using TypeScript and the compiler tells me "useNewUrlParser" does not exists on type ConnectionOptions.
Then, I look up StackOverflow, and find someone mention that the useNewUrlParser and useUnifiedTopology is no longer needed after mongoose 6.0
useNewUrlParser, useUnifiedTopology, useFindAndModify, and useCreateIndex are no longer supported options. Mongoose 6 always behaves as if useNewUrlParser, useUnifiedTopology, and useCreateIndex are true, and useFindAndModify is false. Please remove these options from your code.
Yes correct, these props are no longer required.
http://localhost:3000/api/auth/error?error=AccessDenied
error
⚠ Invalid next.config.mjs options detected:
⚠ Unrecognized key(s) in object: 'appDir' at "experimental"
⚠ See more info here: https://nextjs.org/docs/messages/invalid-next-config
✓ Ready in 2.4s
/** @type {import('next').NextConfig} */
const nextConfig = {
experimental: {
appDir: true,
serverComponentsExternalPackages: ["mongoose"],
},
images: {
domains: ['lh3.googleusercontent.com'],
},
webpack(config) {
config.experiments = {
...config.experiments,
topLevelAwait: true,
};
return config;
}
};
export default nextConfig;
http://localhost:3000/api/auth/error?error=AccessDenied
error ⚠ Invalid next.config.mjs options detected: ⚠ Unrecognized key(s) in object: 'appDir' at "experimental" ⚠ See more info here: https://nextjs.org/docs/messages/invalid-next-config ✓ Ready in 2.4s
/** @type {import('next').NextConfig} */ const nextConfig = { experimental: { appDir: true, serverComponentsExternalPackages: ["mongoose"], }, images: { domains: ['lh3.googleusercontent.com'], }, webpack(config) { config.experiments = { ...config.experiments, topLevelAwait: true, }; return config; } };
export default nextConfig;
Try this:
/** @type {import('next').NextConfig} */
const nextConfig = {
images: {
remotePatterns: [
{
protocol: "https",
hostname: "lh3.googleusercontent.com",
pathname: "**",
},
],
},
webpack(config) {
config.experiments = {
...config.experiments,
topLevelAwait: true,
};
return config;
},
};
export default nextConfig;
This will work if you use NEXT 14. I also fixed error for images. Make sure your file has .mjs extension and do what this guy in youtube comment section suggested.
http://localhost:3000/api/auth/error?error=AccessDenied
error ⚠ Invalid next.config.mjs options detected: ⚠ Unrecognized key(s) in object: 'appDir' at "experimental" ⚠ See more info here: https://nextjs.org/docs/messages/invalid-next-config ✓ Ready in 2.4s
/** @type {import('next').NextConfig} */ const nextConfig = { experimental: { appDir: true, serverComponentsExternalPackages: ["mongoose"], }, images: { domains: ['lh3.googleusercontent.com'], }, webpack(config) { config.experiments = { ...config.experiments, topLevelAwait: true, }; return config; } };
export default nextConfig;Try this:
/** @type {import('next').NextConfig} */ const nextConfig = { images: { remotePatterns: [ { protocol: "https", hostname: "lh3.googleusercontent.com", pathname: "**", }, ], }, webpack(config) { config.experiments = { ...config.experiments, topLevelAwait: true, }; return config; }, };
export default nextConfig;
This will work if you use NEXT 14. I also fixed error for images. Make sure your file has .mjs extension and do what this guy in youtube comment section suggested.
The steps shown in the image didn't work for me but instead I looked up online and found a regex to select every single space from the profile.name value.
username: profile.name.replace(/\s+/g, "").toLowerCase()
Using this fragment of code i was able to sign in to my account
Hi did anyone got this error?? and if you have resolved it, please pass the solutions.
I have done everything. but again and again got this error..
Nav.jsx:15 [next-auth][error][CLIENT_FETCH_ERROR] https://next-auth.js.org/errors#client_fetch_error Unexpected token '<', "<!DOCTYPE "... is not valid JSON {error: {…}, url: '/api/auth/providers', message:
Unexpected token '<', "<!DOCTYPE "... is not valid JSON} logger.js:92 POST http://localhost:3000/api/auth/_log 404 (Not Found) Nav.jsx:15 POST http://localhost:3000/api/auth/_log 404 (Not Found) logger.js:92 POST http://localhost:3000/api/auth/_log 404 (Not Found) Nav.jsx:15 POST http://localhost:3000/api/auth/_log 404 (Not Found)
app-index.js:35 [next-auth][error][CLIENT_FETCH_ERROR] https://next-auth.js.org/errors#client_fetch_error Unexpected token '<', "<!DOCTYPE "... is not valid JSON {error: {…}, url: '/api/auth/session', message:
Unexpected token '<', "<!DOCTYPE "... is not valid JSON}
You are probably rendering it wrong in layout.jsx file inside RootLayout.
Try this:
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;
http://localhost:3000/api/auth/error?error=AccessDenied
error ⚠ Invalid next.config.mjs options detected: ⚠ Unrecognized key(s) in object: 'appDir' at "experimental" ⚠ See more info here: https://nextjs.org/docs/messages/invalid-next-config ✓ Ready in 2.4s
/** @type {import('next').NextConfig} */ const nextConfig = { experimental: { appDir: true, serverComponentsExternalPackages: ["mongoose"], }, images: { domains: ['lh3.googleusercontent.com'], }, webpack(config) { config.experiments = { ...config.experiments, topLevelAwait: true, }; return config; } };
export default nextConfig;
Keep the next.config.mjs as it is.
Create a new file with the name next.config.js in your root directory and add the following code in this file.
/** @type {import('next').NextConfig} */
const nextConfig = {
experimental: {
appDir: true,
serverComponentsExternalPackages: ["mongoose"],
},
images: {
domains: ["lh3.googleusercontent.com"],
},
webpack(config) {
config.experiments = {
...config.experiments,
topLevelAwait: true,
};
return config;
},
};
module.exports = nextConfig;
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 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
- Make sure the password match in .env and MONGO DB. I noticed sometimes the password does not update if you changed it.
- Make sure the
< >
are removed in the env file for the MONGODB_URI- Make sure you add your email as an authorize tester in the Google Cloud project
- Make sure there are no trailing spaces in the IDs
In case all of these don't work, try replacing your route.js
with the one from the repo. I was missing some returns in the signIn
function.
@Thai-Huynh0510 I believe I had a similar issue. It turns out that in the DELETE method implemented in /api/prompt/[id]/route.js
, the findByIdAndRemove()
function has been replaced by findByIdAndDelete()
. Changing that solved the issue for me.
where is next.config in gist
I'm still getting an access denied error despite trying all of the solutions and copying the route.js from the repo
@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?
Hi did anyone got this error?? and if you have resolved it, please pass the solutions.
I have done everything. but again and again got this error..
Nav.jsx:15 [next-auth][error][CLIENT_FETCH_ERROR] https://next-auth.js.org/errors#client_fetch_error Unexpected token '<', "<!DOCTYPE "... is not valid JSON {error: {…}, url: '/api/auth/providers', message:
Unexpected token '<', "<!DOCTYPE "... is not valid JSON} logger.js:92 POST http://localhost:3000/api/auth/_log 404 (Not Found) Nav.jsx:15 POST http://localhost:3000/api/auth/_log 404 (Not Found) logger.js:92 POST http://localhost:3000/api/auth/_log 404 (Not Found) Nav.jsx:15 POST http://localhost:3000/api/auth/_log 404 (Not Found)
app-index.js:35 [next-auth][error][CLIENT_FETCH_ERROR] https://next-auth.js.org/errors#client_fetch_error Unexpected token '<', "<!DOCTYPE "... is not valid JSON {error: {…}, url: '/api/auth/session', message:
Unexpected token '<', "<!DOCTYPE "... is not valid JSON}