Jamstack in Action

$ yarn create next-app jamstack-2022 --typescript

$ yarn add -D tailwindcss postcss autoprefixer$ yarn tailwindcss init -p

// tailwind.config.js/** @type {import('tailwindcss').Config} */module.exports = {  content: [    "./pages/**/*.{js,ts,jsx,tsx}",    "./components/**/*.{js,ts,jsx,tsx}",  ],  theme: {    extend: {},  },  plugins: [],}

/* styles/globals.css */@tailwind base;@tailwind components;@tailwind utilities;

$ yarn add -D prisma$ yarn prisma init$ yarn add @prisma/client

// prisma/schema.prismagenerator client {  provider = "prisma-client-js"}datasource db {  provider = "sqlite"  url      = env("DATABASE_URL")}

; .envDATABASE_URL="file:./dev.db"

// lib/prisma.ts// globals.d.tsimport { PrismaClient } from '@prisma/client'declare module global {    let prisma: PrismaClient;}let prisma: PrismaClient;if (process.env.NODE_ENV === 'production') {    prisma = new PrismaClient()} else {    if (!global.prisma) {        global.prisma = new PrismaClient({ log: ['info', 'query'] })    }    prisma = global.prisma}export default prisma;

$ yarn add next-auth @next-auth/prisma-adapter

// prisma/schema.prismagenerator client {  provider = "prisma-client-js"}datasource db {  provider = "sqlite"  url      = env("DATABASE_URL")}model Account {  id                String  @id @default(cuid())  userId            String  type              String  provider          String  providerAccountId String  refresh_token     String?  access_token      String?  expires_at        Int?  token_type        String?  scope             String?  id_token          String?  session_state     String?  user User @relation(fields: [userId], references: [id], onDelete: Cascade)  @@unique([provider, providerAccountId])}model Session {  id           String   @id @default(cuid())  sessionToken String   @unique  userId       String  expires      DateTime  user         User     @relation(fields: [userId], references: [id], onDelete: Cascade)}model User {  id            String    @id @default(cuid())  name          String?  email         String?   @unique  emailVerified DateTime?  image         String?  accounts      Account[]  sessions      Session[]}model VerificationToken {  identifier String  token      String   @unique  expires    DateTime  @@unique([identifier, token])}

// pages/_app.tsximport '../styles/globals.css'import type { AppProps } from 'next/app'import { SessionProvider } from "next-auth/react"export default function App({  Component,  pageProps: { session, ...pageProps },}: AppProps) {  return (    <SessionProvider session={session}>      <Component {...pageProps} />    </SessionProvider>  )}

// pages/api/auth/[...nextauth].tsimport NextAuth from "next-auth"import GoogleProvider from "next-auth/providers/google"import { PrismaAdapter } from "@next-auth/prisma-adapter"import prisma from './../../../lib/prisma'export default NextAuth({  adapter: PrismaAdapter(prisma),  providers: [    GoogleProvider({      clientId: process.env.GOOGLE_CLIENT_ID as string,      clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,    }),  ],})

; .envDATABASE_URL="file:./dev.db"GOOGLE_CLIENT_ID=<Lo que te tire GCP console>GOOGLE_CLIENT_SECRET=<Lo que te tire GCP console>

// pages/index.tsximport { useSession, signIn, signOut } from "next-auth/react"export default function Component() {  const { data: session } = useSession()  if (session) {    return <>      <p>Signed in as <span className='font-bold'>{session!.user!.email}</span></p>      <button onClick={() => signOut()} className='bg-blue-500 py-1 px-3 text-white rounded'>Sign out</button>    </>  }  return <>    <p>Not signed in</p>    <button onClick={() => signIn()} className='bg-blue-500 py-1 px-3 text-white rounded'>Sign in</button>  </>}

$ yarn prisma db push

$ yarn start