npx prisma db push
Prisma schema loaded from prisma/schema.prisma
Datasource "db": PostgreSQL database

Error: Prisma schema validation - (get-config wasm)
Error code: P1012
error: Environment variable not found: POSTGRES_PRISMA_URL.
--> schema.prisma:11
|
10 | provider = "postgresql"
11 | url = env("POSTGRES_PRISMA_URL") // uses connection pooling
|

Validation Error Count: 1
[Context: getConfig].
I used npx vercel env pull .env to pull and also set export POSTGRES_URL_NON_POOLING=
Can you please suggest @steven-tey ?

The template boasts 100 performance on lighthouse, but in reality the performance is around 60/100 if you use the real lighthouse - the one google will use to evaluate your website on the search engine results page. It even fails the core web vitals assessment.

https://pagespeed.web.dev/report?url=https%3A%2F%2Fprecedent.dev%2F

Issue 🐛

While changing the size of the screen the button width are overlapping with the container and the tooltip button is hidden in medium screen size.

Video and screenshots

chrome-capture-2023-3-19.webm

PR Raised for the issue 🚀

PR - #39

I built a library with typesafe environment variables for Next.js and would love to add it to Precedent to help the community bring type safety to their environment variables.

https://twitter.com/JacobADevore/status/1614832929036972032

I tried cloning this repo and set my next.config.js to:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  experimental: {
    serverActions: true,
  },
  
};

module.exports = nextConfig;

i did this because I want to try using the Server Actions features descirbed in this video: https://www.youtube.com/watch?v=gPyKKD6mODE&t=2002s (which references this repo in its resources for server actions).

When I try to use this - I get an error that says:

Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: (0 , import_react.useEffect) is not a function
at Analytics (/v9/.next/server/chunks/447.js:32321:32)
at T (/v9/.next/server/chunks/447.js:25855:13)
at Za (/v9/.next/server/chunks/447.js:25960:21)
at Array.toJSON (/v9/.next/server/chunks/447.js:25774:20)
at stringify ()
at da (/v9/.next/server/chunks/447.js:25432:9)
at gb (/v9/.next/server/chunks/447.js:26069:29)
at Timeout._onTimeout (/v9/.next/server/chunks/447.js:25905:16)
at listOnTimeout (node:internal/timers:569:17)
at process.processTimers (node:internal/timers:512:7)

• info Generating static pages (5/5)

Export encountered errors on following paths:
/page: /
 ELIFECYCLE  Command failed with exit code 1.

Does anyone know how to use this repo with server actions?

Hi. Following the change in 2d444cf, the default setup instructions (npx create-next-app precedent --example "https://github.com/steven-tey/precedent") no longer work on Node v19.7.0, with the following error showing up:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/next
npm ERR!   next@"13.3.1-canary.11" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer next@"^12.2.5 || ^13" from [email protected]

I can bypass the error by going into the folder and yarn install-ing there.

Hi, I noticed that there are two main elements in the markup. https://validator.w3.org/nu/?doc=https%3A%2F%2Fprecedent.dev%2F I'm sure it's not a big issue, but I'd hate for it to break a screen reader for someone.

Hello, may I know how you made the screen recording?

Error occurred prerendering page "/sitemap.xml". Read more: https://nextjs.org/docs/messages/prerender-error Error: Invalid prisma.user.findMany()invocation: The tablepublic.User does not exist in the current database. at pn.handleRequestError (/vercel/path0/node_modules/.pnpm/@[email protected][email protected]/node_modules/@prisma/client/runtime/library.js:176:6477) at pn.request (/vercel/path0/node_modules/.pnpm/@[email protected][email protected]/node_modules/@prisma/client/runtime/library.js:176:5786) at async t._request (/vercel/path0/node_modules/.pnpm/@[email protected][email protected]/node_modules/@prisma/client/runtime/library.js:179:10484) at async sitemap (/vercel/path0/.next/server/app/sitemap.xml/route.js:154:19) at async GET (/vercel/path0/.next/server/app/sitemap.xml/route.js:183:16) info - Generating static pages (5/5)

How do i change the next-auth database to mariadb/mysql?

Current format:write script command code violates DRY principles 😿

An example of duplicated prettier command code from package.json:

"format": "prettier \"**/*.{css,js,json,jsx,ts,tsx}\"",
"format:write": "prettier --write \"**/*.{css,js,json,jsx,ts,tsx}\""

Improved script 👉🏻 #76

Common example

"format": "prettier \"**/*.{css,js,json,jsx,ts,tsx}\"",
"format:write": "npm run format -- --write"

Prettier with --cache

"format": "prettier --cache \"**/*.{css,js,json,jsx,ts,tsx}\"",
"format:write": "npm run format -- --write"

I don't know why but I am unable to authenticate

What can I do? I would like to see the site in action 😞

I'm curious about this behavior I'm seeing. When using this template, I create an about page /about/page.tsx that only has:
export default function About() { return <div>About</div> }

While building it marks this page as SSR. If I remove the nextauth stuff and remove the nav bar from the top level layout:
<Suspense fallback="..."> {/* @ts-expect-error Server Component */} <Nav/> </Suspense>

then it will mark the page as static. Shouldn't the child page be static since this element in the top layout is wrapped in Suspense? I don't understand the behavior.

Okay for real though, while Prisma is awesome, I think the next best move for this project would be considering switching to Drizzle as it offers a lot of the benefits of Prisma but fixes a number of the core issues that many people have with it.

The main 2 being codegen & edge support. Since Drizzle allows you to create your schema purely in TypeScript there is no need to generate types from a .prisma file. Then of course the switch to a "native driver" or HTTP driver, like @planetscale/database, to allow for use in a V8 isolate / edge runtime.

How

Probably one of the biggest blockers going in would be porting the current Prisma schema to Drizzle, which should not be too hard.

I have successfully done this myself already for my own custom data as well as using these PR's in the NextAuth.js repo showing how to implement the tables needed to handle NextAuth.js / Auth.js.

If need be I am happy to help migrate the Prisma schema to a Drizzle schema 🙂

I try to develop new things with precedent. Thank you for this wonderful collection.

I think there is a bug in the 'performance first' feature. The "performance first" feature invokes as a demo. WebVitals has a 'CountingNumbers' component. I think the bug is here.

I would like to fix :)

Hello can you add the classic email + password into precedent please

Error occurred prerendering page "/sitemap.xml". Read more: https://nextjs.org/docs/messages/prerender-error

15:06:47.327 | Error:
15:06:47.327 | Invalid prisma.user.findMany() invocation:
15:06:47.327 |  
15:06:47.327 |  
15:06:47.327 | The table public.User does not exist in the current database.

There is a dead simple way to lock down routes with Next Auth. Adding in an example for the "dashboard" page would be sweet. If there's a design for a dashboard page or just a simple page to put together I'd be happy to handle this.

If you can add an example of using useIntersectionObserver like scroll in this template, it would be great.

Thank you.

Tooltips might need some love

Chevron doesn't rotate as intended as the openPopover state never changes in component-grid.tsx

      <Popover
        content={
          <div className="w-full p-2 bg-white rounded-md sm:w-40">
            <button className="relative flex items-center justify-start w-full p-2 space-x-2 text-sm text-left transition-all duration-75 rounded-md hover:bg-gray-100 active:bg-gray-200">
              Item 1
            </button>
            <button className="relative flex items-center justify-start w-full p-2 space-x-2 text-sm text-left transition-all duration-75 rounded-md hover:bg-gray-100 active:bg-gray-200">
              Item 2
            </button>
            <button className="relative flex items-center justify-start w-full p-2 space-x-2 text-sm text-left transition-all duration-75 rounded-md hover:bg-gray-100 active:bg-gray-200">
              Item 3
            </button>
          </div>
        }
        openPopover={openPopover}
        setOpenPopover={setOpenPopover}
      >
        <button className="flex items-center justify-between w-40 px-4 py-2 transition-all duration-75 border border-gray-300 rounded-md hover:border-gray-800 focus:outline-none active:bg-gray-100">
          {openPopover && <p className="text-gray-600">Popover</p>}
          <ChevronDown
            className={`h-4 w-4 text-gray-600 ${
              openPopover ? "rotate-180" : ""
            }`}
          />
        </button>
      </Popover>

Im trying to use this template with LinkedIn as the auth provider.

When I plug it in, I get an error message from linked in that says 'bummer, something went wrong' and a console error that says:

Uncaught TypeError: Cannot read properties of null (reading 'textContent')

Can anyone help to find instructions for how to solve for this? I can't find an auth docs page in the app router section of the nextjs docs.

thank you

The current Layout.tsx is very confusing.

How can I add new pages?

Not sure if I'm the only one, but I've cloned your repo, change the database url to a MySQL db and swapped the GoogleProvider to the TwitterProvider and I'm getting the following error after logging in:

Warning: Received `true` for a non-boolean attribute `inline`.

If you want to write it to the DOM, pass a string instead: inline="true" or inline={value.toString()}.
    at code
    at code (webpack-internal:///./components/home/card.tsx:62:47)
    at p
    at ReactMarkdown (webpack-internal:///./node_modules/.pnpm/[email protected]_kzbn2opkn2327fwg5yzwzya5o4/node_modules/react-markdown/lib/react-markdown.js:90:42)
    at span
    at v (webpack-internal:///./node_modules/.pnpm/[email protected][email protected]/node_modules/react-wrap-balancer/dist/index.mjs:8:856)
    at div
    at div
    at div
    at VisualElementHandler (webpack-internal:///./node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/framer-motion/dist/es/motion/utils/VisualElementHandler.mjs:8:1)
    at MotionComponent (webpack-internal:///./node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/framer-motion/dist/es/motion/index.mjs:50:65)
    at Card (webpack-internal:///./components/home/card.tsx:17:11)
    at div
    at VisualElementHandler (webpack-internal:///./node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/framer-motion/dist/es/motion/utils/VisualElementHandler.mjs:8:1)
    at MotionComponent (webpack-internal:///./node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/framer-motion/dist/es/motion/index.mjs:50:65)
    at main
    at Layout (webpack-internal:///./components/layout/index.tsx:31:11)
    at Home (webpack-internal:///./pages/index.tsx:29:120)
    at main
    at L (webpack-internal:///./node_modules/.pnpm/[email protected][email protected]/node_modules/react-wrap-balancer/dist/index.mjs:8:764)
    at SessionProvider (webpack-internal:///./node_modules/.pnpm/[email protected]_q76c2b4vyoegvsbrcwkfvimnai/node_modules/next-auth/react/index.js:454:24)
    at MyApp (webpack-internal:///./pages/_app.tsx:28:11)
    at PathnameContextProviderAdapter (webpack-internal:///./node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/shared/lib/router/adapters.js:62:11)
    at ErrorBoundary (webpack-internal:///./node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:301:63)
    at ReactDevOverlay (webpack-internal:///./node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:850:919)
    at Container (webpack-internal:///./node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/index.js:61:1)
    at AppContainer (webpack-internal:///./node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/index.js:171:11)
    at Root (webpack-internal:///./node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/index.js:346:11)

And because I'm using pnpm, I've also deleted the yarn.lock file. Everything else is correct (prisma has generated the schema und pushed to the DB and keys are correct because they work on another local app).

Any idea what that could be? As far as I could follow it, it should be somewhere in the popover.tsx or user-dropdown.tsx

When you open the demo modal the markup renders twice in the dom. This means that if you use a form within the modal you will have duplicate id's and causes accessibility issues with the form.

Currently, if you use the Firefox browser and open any modal, it will be off center and at the very top of the page, thus producing a unwanted behavior.

Google Chrome.

Firefox

There are no differences in the code, since the change.
This is also present at the homepage.

With some investigation, this seems like it originates from the root modal itself and not the signin modals, so in other words.... this will occur on every modal.

When i clone this library and try to run it, each of the next libraries is underlined with an error message along the lines of:

Cannot find module 'next-auth/react' or its corresponding type declarations.ts(2307)

Is there something that needs to be updated in this repo?

I'm using an older version of precedent (few weeks old) and I'm experiencing an issue with the Modal animations. The start animations play properly, but the exit animations do not play. Does anyone know how to fix it?

This is the code:

return (
    <AnimatePresence>
      {showModal && (
        <>
          {isMobile && <Leaflet setShow={setShowModal}>{children}</Leaflet>}
          {isDesktop && (
            <>
              <FocusTrap focusTrapOptions={{ initialFocus: false }}>
                <motion.div
                  ref={desktopModalRef}
                  key="desktop-modal"
                  className="fixed inset-0 z-40 hidden min-h-screen items-center justify-center md:flex"
                  initial={{ scale: 0.95 }}
                  animate={{ scale: 1 }}
                  exit={{ scale: 0.95 }}
                  onMouseDown={(e) => {
                    if (desktopModalRef.current === e.target) {
                      setShowModal(false);
                    }
                  }}
                >
                  {children}
                </motion.div>
              </FocusTrap>
              <motion.div
                key="desktop-backdrop"
                className="fixed inset-0 z-30 bg-gray-100 bg-opacity-10 backdrop-blur"
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                exit={{ opacity: 0 }}
                onClick={() => setShowModal(false)}
              />
            </>
          )}
        </>
      )}
    </AnimatePresence>
  );

I can see the issue live on https://precedent.dev/ so presumably it's still there with the new code.

<dialog> element is widely available now! I would recommend using it for modals :)
https://github.com/steven-tey/precedent/blob/main/components/shared/modal.tsx

Not sure if this is my issue but when I tried to do "npm run build" , I get this error:

This is crazy minor, but I follow you on Twitter and think you enjoy these polish challenges.

Look at the bottom of the viewport in this video. The spring bounce in the animation is causing the container of the components (in the title of this issue) to bounce and reveal the overlay underneath briefly.

I'm not really sure what a solution might be. Maybe make the height of the containers like 110% so that the bounce doesn't reveal the overlay underneath?

error - Failed to download Inter from Google Fonts. Using fallback font instead.

Tried running this app as bare as it came with no configuration and this happens within my codespace.

only an issue when resizing from small to large, the extra portion of screen will not have blur.
could not find a fix myself, will update if I do.

(big thank you for the template)

The issue:

Steps to reproduce:

Open the precedent website and quickly switch to another tab while the counter is still counting up. Wait for a few seconds and then go back to the precedent tab.

I'm not familiar with the codebase but I'll try to figure out how this happens.

Consider adding GitHubProvider as an optional authentication method. This simply showcases available options. I'd be happy to handle the implementation for you.

Hello, I notice that the animation when modal is closed not working. It disappears suddenly when we click on blur to close Modal.
I tried to find some solution, mostly about Framer Motion but I see there are nothing wrong. 🧐
Anyone knows how to fix it, I think UX will be better so much if we can fix it.

Overview

When doing a second migration with prisma, you are presented with Error: P3005:

Error: P3005

The database schema is not empty. Read more about how to baseline an existing production database: https://pris.ly/d/migrate-baseline

Removing the shadowDatabaseUrl from the schema.prisma datasource fixes this.

With latest updates from Vercel, we no longer need the shadowDatabaseUrl to handle migrations.

See: prisma/prisma#19234 (comment)