Zoom Logo

Building static sites with Prisma and Next.js - Shared screen with speaker view
Lee Robinson
12:48
https://github.com/leerob/next-prisma-starter
Joël Galeran
12:55
Thanks Hello there!
Marcus Böhm
15:20
Hi Joel :wave:!
Tim Suchanek
15:42
Hello 👋
Thorsten Schaeff
20:14
Hello everyone 👋 greetings from Singapore 🇸🇬
Tim Suchanek
21:29
Hey Thorsten! Long time no see. This year no beers in the garden 🤷‍♀️
Thorsten Schaeff
22:05
Unfortunately not :( But excited for the stream tomorrow :)
Tim Suchanek
22:46
Yes! Will be awesome
Thorsten Schaeff
23:24
https://next-code-elimination.now.sh/
Tim Suchanek
23:50
👍
Lee Robinson
24:48
https://prisma-next.now.sh/
Tim Suchanek
28:40
🔥
Ismail Ghallou
29:29
Often times that doesn’t work and I’m forced to use Next API routes and fetch the API route within getStaticProps
Marcus Böhm
30:02
Which Plugin for vscode do i have to install to get auto imports? Is there simply a typescript plugin for this?
Tim Suchanek
31:39
I also had to re-generate and restart btw
Tim Suchanek
31:56
Ismail: You mean directly calling PrismaClient?
Ismail Ghallou
32:09
yes
Tim Suchanek
32:51
That should work, if not, please create an issue (I remember having fixed something around that a while ago in the issue you reported)
Thorsten Schaeff
33:06
I also had to `yarn generate` and then restart
Tim Suchanek
34:24
Yey works for me!
Alex Tews
35:52
Did you make this once on YouTube too? :P
Ismail Ghallou
42:03
Love Prisma Studio <3
Agirs Neminskis
43:04
do we intend to commit migration files to github?
Agirs Neminskis
43:09
or that shd be gitignore?
Kushalraj P
43:38
commit it to git to track migration changes
Tim Suchanek
43:47
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`
Tim Suchanek
44:06
That’ll then read the migrations from the fs
Agirs Neminskis
44:34
got it
Kushalraj P
44:43
+1 Tim 👌
Agirs Neminskis
47:13
why do we need these routes? :?
Ismail Ghallou
47:31
A page is generated for each song
Agirs Neminskis
49:06
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?
Ismail Ghallou
49:53
It generates X amount of pages depending on the data you have
Gergo Szonyi
49:54
next.js alone cannot figure out all the routes to generate the static site
Marvin Becker
50:44
What if the database has thousands of songs? Will there be thousands of pregenerated pages? Is there a reasonable limit?
Ismail Ghallou
50:56
With Next you can do SSG on run time unlike Gatsby
Gergo Szonyi
51:18
you can but this whole webinar is about static site generation
Ismail Ghallou
51:23
Yes Marvin, not sure if there is a limit
Agirs Neminskis
52:12
Could you please briefly touch on how would Apollo Client fit into this?
Tim Suchanek
52:12
Both Next and Gatsby cooperated with the Chrome team btw to optimize chunking https://web.dev/granular-chunking-nextjs/
Johann Pinson
53:13
Is it possible to imagine a authentification process with only nextjs + prisma ? (Without Auth0 or another external service)
Lee Robinson
54:14
https://chakra-ui.com/getting-started
Lee Robinson
55:36
https://nextjs.org/docs/advanced-features/custom-app
Tim Suchanek
57:02
Johann - that’s a good question. Maybe you also want to ask it in Q&A
Tim Suchanek
59:04
Chakra ftw
Ismail Ghallou
59:32
You might like theme-ui since you’re loving styled-system
Kushalraj P
59:58
do checkout Tailwind CSS as well :)
Tim Suchanek
01:00:21
Haha chakra is actually inspired by Tailwind
Tim Suchanek
01:00:31
Would theme-ui be compatible with chakra?
Ismail Ghallou
01:02:13
Nope, but you could still feed it your Chakra theme but not sure if u can use Chakra components
Tim Suchanek
01:03:08
Ok makes sense. I’m personally using the styled emotion lib to customize chakra components
Joël Galeran
01:03:26
Auto format breaks my file though … :(
Tim Suchanek
01:03:50
@Joël which auto format do you use? The prettier one works well for me
Joël Galeran
01:04:46
I guess my settings were broken somehow
Ismail Ghallou
01:04:51
Same as Tim
Tim Suchanek
01:09:51
Welcome Robin!
Hendrik Wendt
01:10:13
what's the main difference between autoincrement() and cuid() when used for ID fields?
Tim Suchanek
01:10:49
Hendrik: autoincrement() is being use for `Int`, while cuid() is the auto generation for `String` based id fields
Hendrik Wendt
01:12:05
Thank you, Tim. Since autoincrement seems predictable, would most projects use cuid() ?
Tim Suchanek
01:12:26
I personally like `Int` with autoincrement more, because then you can implement a “pick random number / id from db” feature
Tim Suchanek
01:12:46
But yeah, if you need the ids to be random, cuid() sounds like the better option
Hendrik Wendt
01:13:19
Seems to come down to preference. Thanks for your answer
Tim Suchanek
01:13:41
Sure! And btw we also have uuid() as an alternative to cuid
Ismail Ghallou
01:18:32
Looking good!
Ismail Ghallou
01:19:54
Shift + command
Ismail Ghallou
01:22:10
Hey @marvin, yes you can generate thousands of songs, Next supports incremental builds and won’t regenerate “all the pages”
Ismail Ghallou
01:26:06
VCs would love that “vc” haha
Paul Rinaldi
01:27:10
How is vc spelled out (vercel?)?
Tim Suchanek
01:27:35
vercel.com
Kushalraj P
01:28:05
Vercel Catalyst 😂
Ismail Ghallou
01:28:28
lol
Tim Suchanek
01:29:21
The Prisma extension auto formats it
Ismail Ghallou
01:30:15
Yes you can put your Postgres db url and put it instead of the sqlite db url
Agirs Neminskis
01:30:52
Got it, are there any limitations/known issues atm?
Ismail Ghallou
01:30:58
See: https://github.com/smakosh/next-prisma2-now/blob/master/prisma/schema.prisma#L7
Ismail Ghallou
01:31:10
None so far
Agirs Neminskis
01:31:22
Awesome, thanks
Ismail Ghallou
01:31:32
Sure!
Alex Tews
01:34:28
No you can do getServerSideProps() which does it everytime
Ismail Ghallou
01:34:42
We need a postServerSideProps!
Tim Suchanek
01:34:53
Yes Alex - but doesn’t that only run initially?
Tim Suchanek
01:35:17
I e.g. want to have an infinite scroll and “fetch more data later”
Ismail Ghallou
01:35:28
Only initially as Tim said
Ismail Ghallou
01:35:54
For the infinite scroll use case, you have to use useEffect
Tim Suchanek
01:36:36
Let’s hope Next.js adds functionality to import api function directly
Ismail Ghallou
01:36:55
postServerSideProps is what need!
Tim Suchanek
01:37:01
Haha indeed!
Tim Suchanek
01:37:09
Is there some Next.js issue about it?
Ismail Ghallou
01:37:19
Not sure, will have to check
Ismail Ghallou
01:43:39
Thanks for the explanation!
Lee Robinson
01:46:15
https://nextjs.org/docs/basic-features/data-fetching#fallback-pages
Ismail Ghallou
01:46:27
Used on Preview mode
rodrigo rb
01:50:32
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
Ismail Ghallou
01:51:41
Thanks Lee for the presentation and answering our questions!
Ismail Ghallou
01:52:44
Hahaha nice joke there
Johann Pinson
01:58:27
Thanks to you!
Lee Robinson
01:58:46
https://prisma103696.typeform.com/to/O6Q8eXKp
Thorsten Schaeff
01:59:05
Thank you! :)
Agirs Neminskis
01:59:13
Quality content! :)
Lee Robinson
01:59:25
@leeerob
Lee Robinson
01:59:27
leerob.io
rodrigo rb
01:59:30
Thanks!
Lee Robinson
01:59:31
me@leerob.io