Building static sites with Prisma and Next.js - Shared screen with speaker view
Thanks Hello there!
Hi Joel :wave:!
Hello everyone 👋 greetings from Singapore 🇸🇬
Hey Thorsten! Long time no see. This year no beers in the garden 🤷♀️
Unfortunately not :( But excited for the stream tomorrow :)
Yes! Will be awesome
Often times that doesn’t work and I’m forced to use Next API routes and fetch the API route within getStaticProps
Which Plugin for vscode do i have to install to get auto imports? Is there simply a typescript plugin for this?
I also had to re-generate and restart btw
Ismail: You mean directly calling PrismaClient?
That should work, if not, please create an issue (I remember having fixed something around that a while ago in the issue you reported)
I also had to `yarn generate` and then restart
Yey works for me!
Did you make this once on YouTube too? :P
Love Prisma Studio <3
do we intend to commit migration files to github?
or that shd be gitignore?
commit it to git to track migration changes
Usually you should commit them to GitHub. If you e.g. have a CI system that does the production deployment, it can just run `prisma migrate up`
That’ll then read the migrations from the fs
+1 Tim 👌
why do we need these routes? :?
A page is generated for each song
I know this is more Next.js than Prisma, but i’m a bit confused, granted that we have file-based routing that also gives us the dynamic routing, what benefit do we get from the getStaticPaths?
It generates X amount of pages depending on the data you have
next.js alone cannot figure out all the routes to generate the static site
What if the database has thousands of songs? Will there be thousands of pregenerated pages? Is there a reasonable limit?
With Next you can do SSG on run time unlike Gatsby
you can but this whole webinar is about static site generation
Yes Marvin, not sure if there is a limit
Could you please briefly touch on how would Apollo Client fit into this?
Both Next and Gatsby cooperated with the Chrome team btw to optimize chunking https://web.dev/granular-chunking-nextjs/
Is it possible to imagine a authentification process with only nextjs + prisma ? (Without Auth0 or another external service)
Johann - that’s a good question. Maybe you also want to ask it in Q&A
You might like theme-ui since you’re loving styled-system
do checkout Tailwind CSS as well :)
Haha chakra is actually inspired by Tailwind
Would theme-ui be compatible with chakra?
Nope, but you could still feed it your Chakra theme but not sure if u can use Chakra components
Ok makes sense. I’m personally using the styled emotion lib to customize chakra components
Auto format breaks my file though … :(
@Joël which auto format do you use? The prettier one works well for me
I guess my settings were broken somehow
Same as Tim
what's the main difference between autoincrement() and cuid() when used for ID fields?
Hendrik: autoincrement() is being use for `Int`, while cuid() is the auto generation for `String` based id fields
Thank you, Tim. Since autoincrement seems predictable, would most projects use cuid() ?
I personally like `Int` with autoincrement more, because then you can implement a “pick random number / id from db” feature
But yeah, if you need the ids to be random, cuid() sounds like the better option
Seems to come down to preference. Thanks for your answer
Sure! And btw we also have uuid() as an alternative to cuid
Shift + command
Hey @marvin, yes you can generate thousands of songs, Next supports incremental builds and won’t regenerate “all the pages”
VCs would love that “vc” haha
How is vc spelled out (vercel?)?
Vercel Catalyst 😂
The Prisma extension auto formats it
Yes you can put your Postgres db url and put it instead of the sqlite db url
Got it, are there any limitations/known issues atm?
None so far
No you can do getServerSideProps() which does it everytime
We need a postServerSideProps!
Yes Alex - but doesn’t that only run initially?
I e.g. want to have an infinite scroll and “fetch more data later”
Only initially as Tim said
For the infinite scroll use case, you have to use useEffect
Let’s hope Next.js adds functionality to import api function directly
postServerSideProps is what need!
Is there some Next.js issue about it?
Not sure, will have to check
Thanks for the explanation!
Used on Preview mode
Well my opinion is that these tools can help you ship consistently faster…I`ve seen a lot more problems coming from analysis paralysis than lock-ins problems
Thanks Lee for the presentation and answering our questions!
Hahaha nice joke there
Thanks to you!
Thank you! :)
Quality content! :)