Coder un SaaS avec Next JS, Typescript, Stripe, Prisma, SQLite, Tailwind CSS, ShadCN et Next Auth

[@depuisle229]

Merci beaucoup pour cette vidéo. Consacré prêt de 5H pour un projet n'est pas du tout facile. Encore moins quand il s'agit d'expliquer en même temps.
Merci encore 🙏🙏🙏🙏🙏🙏🙏

[@laminutedecode]

Hello, merci à toi pour ton retour ainsi que ton soutiens 🙏🏼😁

[@louisss_emile]

Merci beaucoup ! J'avais de bonnes bases en React & j'ai passé à ce tuto directement, j'ai utilisé cursor + dev0, ça c'est super bien passé

[@laminutedecode]

Hello,
Génial , Merci à toi pour ton retour et ton soutiens et bien jouer pour ce que tu as accomplie .
Bien à toi
Jonathan

[@hadrienjanssens7485]

Cette chaine c'est vraiment un pépite ! 🔥 Continue comme ça !

[@laminutedecode]

Merci 🙏🏼 😁😊 à toi pour ton soutiens et ton retour

[@Kajan.24]

Sa serait intéressant que tu fasses une vidéo sur une app de reservation et le paiement sur le site, et montrer comment publier le site avec la base de données(react js, stripe, tailwind) .

[@ParzivalEu_]

je peux te l'expliquer si jamais !

[@chaineyoutube4470]

Salut super video mais normallement dans les settings tu me en async le client components cest cense généré une erreur car cest pas possible?

[@laminutedecode]

Hello,
merci à toi pour ton retour , logiquement je te dirais mais si il y’en à pas c’est la manière dont j’ai dû composer le code je vais regarder sa je n’est plus le code en tête et je reviens vers toi,
Bien à toi
Jonathan

[@sfayzer]

i told you many times you are the best 🔥

[@laminutedecode]

Thanks 🙏🏼

[@ParzivalEu_]

Petit tips de dernière minutes : en utilisant Shadcn vous avez clsx et TwMerge dans /lib/utils.ts et vous pouvez donc utilisez l'export "cn" ce qui donne ceci :
Annuler
Ce qui évite de mettre un Button et un link dans ce button.

[@laminutedecode]

Merci pour l’astuce 🌟🌟🌟

[@ParzivalEu_]

@@laminutedecode Tu m’as appris plein de choses sur les servers action par contre arriver à Stripe j’étais perdu. J’ai réussi à te suivant mais à refaire j’y arriverais pas .. 🥲

[@laminutedecode]

Merci à toi pour ton soutiens , N’hésite pas à me contacter sur le discord si je peut t’apporter de l’aide supplémentaire ou une explications plus clair 😁

[@mhddjibril]

Merci 🎉

[@laminutedecode]

Je t’en pris avec plaisir

[@ovna]

J'aurais préferer que tu utilise la v5 de next auth aussi appelé authjs mais c'est un détail et autre petit détail shadcn a déja un composant sonner donc pas besoin d'utilisé une autre librairie je pense mais en tout cas super video

[@laminutedecode]

Hello
je prend notes de tes suggestions pour les prochaines , merci à toi pour ton retour et au plaisir 😁
Bien à toi
Jonathan

[@123vlaadh8]

Merci pour la vidéo, c’est un contenu de qualité et la vidéo est agréable à suivre.
Par contre j’ai un petit souci, je ne sais pas si quelqu’un peut m’aider. Quand j’essaie de me connecter avec Google ou Git je suis redirigé vers une erreur et quand je regarde la db il y a bien un nouvel utilisateur, mais pas de session d’ouverte. Une idée de ce qu’il pourrait se passer ? (Pas d’erreur dans la console sur vscode)

[@laminutedecode]

Helllo ,
merci à toi pour ton retour , concernant ton problème il doit sûrement avoir une erreur dans la route API de l’authentification ou bien sans le Layout , peut tu montrer ton code stp ?
Bien à toi
Jonathan

[@123vlaadh8]

@@laminutedecode Merci pour ta réponse, j'avoue je sèche un peu !
voila mes fichiers (désolé pour la taille du message...)
authOptions
import { NextAuthOptions } from "next-auth"
import GithubProvider from "next-auth/providers/github";
import GoogleProvider from "next-auth/providers/google";
import { PrismaAdapter } from "@next-auth/prisma-adapter";
import {prisma} from "@/lib/db"
export const authOptions: NextAuthOptions = {
adapter: PrismaAdapter(prisma),
providers: [
GithubProvider({
clientId: process.env.GITHUB_ID as string,
clientSecret: process.env.GITHUB_SECRET as string,
}),
GoogleProvider({
clientId: process.env.GOOGLE_CLIENT_ID as string,
clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
}),

],
callbacks : {
session: async({session,user})=> {
console.log(session,user);

return session
}
}
};
layout
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import Nav from "./components/Nav";
import { ThemeProvider } from "./components/theme-provider";
import SessionWrapper from "@/lib/SessionWrapper";
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: Readonly) {
return (





{children}




);
}
schema.prisma :
generator client {
provider = "prisma-client-js"
}
datasource db {
provider = "sqlite"
url = "file:./dev.db"
}
model Account {
id String @id @default(cuid())
userId String
type String
provider String
providerAccountId String
refreshToken String?
accessToken String?
accessTokenExpires DateTime?
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
user User @relation(fields: [userId], references: [id])
@@unique([provider, providerAccountId])
}
model Session {
id String @id @default(cuid())
userId String
expires DateTime
sessionToken String @unique
accessToken String @unique
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
user User @relation(fields: [userId], references: [id])
}
model User {
id String @id @default(cuid())
name String?
email String? @unique
emailVerified DateTime?
image String?
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
accounts Account[]
sessions Session[]
}
model VerificationRequest {
id String @id @default(cuid())
identifier String
token String @unique
expires DateTime
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
@@unique([identifier, token])
}
(j'ai changé "providerId" en "provider", j'avais une erreur sinon)
Je sais pas si quelque chose te saute au yeux :/

[@Kajan.24]

C'est quoi l'extension pour voir la db?

[@laminutedecode]

Télécharge l’extension Prisma et SQlite preview

[@choanlpoto]

oh putin j'ai cru entendre heavy de french wargame studio xD

[@laminutedecode]

😂😂 ahah ba non ce n’est pas moi

[@chrisder1814]

merci mais j'ai bcp de mal à tout comprendre

[@laminutedecode]

Je t’en pris n’hésite pas à poser des questions si tu rencontre des problèmes ou si certaines choses te paraissent floue , il y’a également le discord si besoin 😁 discord.laminutedecode.io

[@chrisder1814]

@@laminutedecode tu es JB?

[@laminutedecode]

Oui

[@ParzivalEu_]

Arrête de dire ShadCDN c’est ShadCN ! 🤣

[@laminutedecode]

😂😂😂 la fatigue que veut tu

[@ParzivalEu_]

@@laminutedecode 🤣🤣🤪😝

[@laminutedecode]

😂😊

[@issiagaconde]

Salut la minute de code ! Avant tout, merci pour l'énorme efforts que vous avez fourni pour la réalisation de ce magnifique tuto. J'ai appris de nouvelle choses. J'ai aimé beaucoup l'indentation dans votre fichier schema.prisma. comment avez vous configuré ou quelle extension qui permet de le faire ? Merci ! ❤❤

[@laminutedecode]

Hello,
je te remercie pour ton retour et ton soutien . Concernant l’extension c’est l’extension prisma qui permet de faire cette indentation avec les fichiers schema
Bien à toi
Jonathan

[@jacquesmatike9289]

😂 c’est ChadCN et non chadCDN.
De plus tu t’es trompé au niveau de la navbar, tu as inversé les explications pour pour flex-around et flex-evenly 😅

[@laminutedecode]

Ahah oui pardons sa arrive , oui aussi mais je l’es préciser juste après que je m’étais tromper 😁

[@yuno2857]

ShadCN et non ChadCN

[@laminutedecode]

Décidément 😂

[@jacquesmatike9289]

@@laminutedecode on va y arriver

[@laminutedecode]

😂😂😂

[@BahozMMA]

Hello tout d'abord merci pour ce super tuto mais j'ai un problème.
Est-ce normal que quand je fais tout comme toi pour l'authentification avec google et github et que j'essaye de me connecter ça marche pas, j'ai ce message d'erreur dans le terminal :
Merci d'avance pour ton aide
Unknown argument `provider_providerAccountId`. Did you mean `providerId_providerAccountId`? Available options are marked with ?.
at Tn (D:\Dev_Web\mdc-sass
ode_modules\.pnpm\@prisma+client@5.15.1_prisma@5.15.1
ode_modules\@prisma\client
untime\library.js:115:6855)
at In.handleRequestError (D:\Dev_Web\mdc-sass
ode_modules\.pnpm\@prisma+client@5.15.1_prisma@5.15.1
ode_modules\@prisma\client
untime\library.js:122:6533)
at In.handleAndLogRequestError (D:\Dev_Web\mdc-sass
ode_modules\.pnpm\@prisma+client@5.15.1_prisma@5.15.1
ode_modules\@prisma\client
untime\library.js:122:6211)
at In.request (D:\Dev_Web\mdc-sass
ode_modules\.pnpm\@prisma+client@5.15.1_prisma@5.15.1
ode_modules\@prisma\client
untime\library.js:122:5919)
at async l (D:\Dev_Web\mdc-sass
ode_modules\.pnpm\@prisma+client@5.15.1_prisma@5.15.1
ode_modules\@prisma\client
untime\library.js:127:11167)
at async getUserByAccount (webpack-internal:///(rsc)/./node_modules/.pnpm/@next-auth+prisma-adapter@1.0.7_@prisma+client@5.15.1_prisma@5.15.1__next-auth@4.24.7_next@14_udqkmdlm7yrtqp57tpq2pa2k4y/node_modules/@next-auth/prisma-adapter/dist/index.js:211:29)
{
name: 'GetUserByAccountError',
code: undefined
}
GET /api/auth/callback/google?state=AUDmBR6Vm6zlnnwWsZhIhh215DZHXakMDrYD2zHiy6s&code=4%2F0ATx3LY4hD2e3pY7j-LrbUnlKEGuamUl-LMXJylUZIFxlb9skBXQef7znoXNkGzKUfi3IgQ&scope=email+profile+openid+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.profile+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email&authuser=3&prompt=consent 302 in 216ms
GET /api/auth/error?error=Callback 302 in 5ms
GET /api/auth/signin?error=Callback 200 in 7ms

[@haystormimoutside6353]

j'ai eut le même problème !
Cette erreur vient de "schema.prisma" car la documentation à légèrement changé. Je recommande donc d'aller sur le github du projet et de simplement copier son schema ;)

[@wisdomwisdom4071]

@@haystormimoutside6353 Merci beaucoup. j'ai passer des heures a revoir la video et essayer de comprendre où j'est raté🤣. Ton commentaire m'a sauver

[@Thomas.online]

@@haystormimoutside6353 Effectivement, mais si cela ne fonctionne toujours pas, mettez à jour Prisma en rapport du nouveau schéma avec la commande : npx prisma migrate dev --name update-schema 😇

[@zarlor8481]

J'ai eu le même problème ! Merci
@haystormimoutside6353

[@DavidBetter57]

J'ai le même problème mais je ne m'en sort pas 😞