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

• bug_report.md
• feature_request.md
• idea_request.md

How I worked and thoughts with issues

[FEATURE] add content #38

_{^{[FEATURE] add content #38}}

The Hilariously Unpredictable Image Monk Gallery

• Inspired by the delightful chaos of the Masonry Grid, 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}}

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,

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

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}}

Add below snippet in file /app/prisma/db.ts file

import { PrismaClient } from '@prisma/client'

const prismaClientSingleton = () => {
  return new PrismaClient()
}

declare global {
  var prisma: undefined | ReturnType<typeof prismaClientSingleton>
}

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}}

npm install @apollo/server graphql

How to integrate Apollo Server with App Router

_{^{https://github.com/apollo-server-integrations/apollo-server-integration-next}}

Add below snippet in app/api/graphql/route.ts file.

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