A Next.js 13 application built using the new router, server components and server actions, as well as NextAuth.js, Drizzle ORM and Turso in an Nx monorepo
Warning This app is more than likely not using best practices. Server actions are still in alpha and some things currently don't work in an Nx monorepo.
I built this project to play around with server actions as well as server components, Drizzle ORM and the new intercepting / parallel routes. Take everything you see in here with a grain of salt.
Warning This app is using server actions, which are in alpha, and do not (yet) have the best UX or DX. Expect to see some jank when playing around with the app. As for a personal recommendation, I'd stick to something like tRPC for now and wait until they improve things in the future.
- Using the new Next.js app directory and nearly everything that comes with it (dynamic open graph images, metadata etc.)
- Intercepting / parallel routes
- Authentication using NextAuth.js
- Drizzle ORM
- Using Turso for the database
- TypeScript
A list of things not working right now:
- Constant warnings in the terminal, probably caused by Nx
- Loading state when adding / removing Pokémon is janky because of server actions
- Install dependencies using npm:
- Copy
.env.exampleto.envand update the variables (you will need to set up GitHub OAuth)
cp .env.example .env.local- Run the migrations & seed the database
npx drizzle-kit generate:sqlite
npx drizzle-kit up:sqlite
npm run seed- Start the development server:
npx nx serve webJust a few things that helped to build this app
- Adapted a lot of components from @shadcn's UI library
- Used @anthonyshrew's Drizzle adapter for NextAuth as a base
- @samselikoff's Build UI for inspiration for the Pokémon ball dock
- Ryan Toronto's tweet about implementing search with search params
Licensed under the MIT license.