wongprom / test-next-13

"My coding project, akin to a 'baby' that continually evolves, will never reach a final stage as I consistently incorporate fascinating new technologies."
https://www.jimmybackstrom.com/
3 stars 0 forks source link
app appdirectory clerk-auth nested-routes next13 nextjs react-pdf sanity supabase tailwindcss typescript

Discover the Secrets of test-next-13

Welcome to the world of Test Next.js 13, where innovation is in progress! ๐Ÿš€

Ever wondered what goes on behind the scenes of this exciting project? Dive deep into the mysteries by exploring our meticulous roadmap and accomplishments.

๐Ÿ” Intrigued? Uncover the details here: Project Roadmap and Achievements

Get ready to embark on a journey of web development like no other. Your curiosity is your guide.

Environment

node - 18.11.0

next - 13.3.0 (app/dir)

react - 18.2.0

package.json

Create issues from template

How I worked and thoughts with issues

[FEATURE] add content #38 [[FEATURE] add content #38](https://github.com/wongprom/test-next-13/issues/38) ### The Hilariously Unpredictable Image Monk Gallery - Inspired by the delightful chaos of the [Masonry Grid](https://masonry.desandro.com/), and a dash of monkey business! ### Elevating the Interactive Image Gallery Game - I wanted image gallery to be a bit more lively than 'Monk' gallery. That's why text magically appears when you hover over the images!
[BUG] active link style #35 [[BUG] active link style #35](https://github.com/wongprom/test-next-13/issues/35) ### The Fantastic Journey to Cleaner Code! ๐Ÿงน - Behold the creation of a superhero component that parent components can now effortlessly map out! Adding new links and routes? Piece of cake! ๐Ÿฐ ### Sprucing Up with Style! ๐Ÿ’ƒ - When it comes to those delightful sublinks emerging from `/about`, we're giving the page a makeover that's cleaner than a freshly laundered superhero cape. What does that mean? We're keeping it as simple as a sidekick's sidekick until we've decided on our grand style and layout reveal! Stay tuned for the fashion show!

## Supabase

How to Update schema.prisma After making changes/update schema.prisma ex, ```prisma model Quote { id String @id @default(uuid()) title String image String? createdAt DateTime @default(now()) updatedAt DateTime @updatedAt owner Owner[] } model Owner { id String @id @default(uuid()) name String Quote Quote? @relation(fields: [quoteId], references: [id]) quoteId String? LifeLesson LifeLesson? @relation(fields: [lifeLessonId], references: [id]) lifeLessonId String? } ``` type in terminal and push to supabase to sync new schema ```bash npx prisma db push ``` DONE! ๐Ÿ‘
How to Create PrismaClient [https://www.prisma.io/docs/guides/other/troubleshooting-orm/help-articles/nextjs-prisma-client-dev-practices](https://www.prisma.io/docs/guides/other/troubleshooting-orm/help-articles/nextjs-prisma-client-dev-practices) Add below snippet in file `/app/prisma/db.ts` file ```js import { PrismaClient } from '@prisma/client' const prismaClientSingleton = () => { return new PrismaClient() } declare global { var prisma: undefined | ReturnType } const prisma = globalThis.prisma ?? prismaClientSingleton() export default prisma if (process.env.NODE_ENV !== 'production') globalThis.prisma = prisma ```
## Apollo Server
How to install Apollo Server [https://www.apollographql.com/docs/apollo-server/getting-started](https://www.apollographql.com/docs/apollo-server/getting-started) ```js npm install @apollo/server graphql ```
How to integrate Apollo Server with App Router [https://github.com/apollo-server-integrations/apollo-server-integration-next](https://github.com/apollo-server-integrations/apollo-server-integration-next) Add below snippet in `app/api/graphql/route.ts` file.

```js import { startServerAndCreateNextHandler } from '@as-integrations/next'; import { ApolloServer } from '@apollo/server'; // import { gql } from 'graphql-tag'; const resolvers = { Query: { hello: () => 'world', }, }; // const typeDefs = gql` // type Query { // hello: String // } // `; const typeDefs = `#graphql type Query { hello: String } `; const server = new ApolloServer({ resolvers, typeDefs, }); const handler = startServerAndCreateNextHandler(server); export { handler as GET, handler as POST }; ``` install missing dependencies ``` npm i @as-integrations/next ``` You can access server on `localhost:3000/api/graphql`