next-real-world

KO | EN

gitlite — search

#react #cli #python #javascript #php #android #docker #rust #docker-image #nodejs #typescript #go

next-real-world

★ 47 Open GitHub ↗

A fullstack implementation of the RealWorld App using Next.js, Prisma ORM and Apollo GraphQL stack

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# next-real-world

## About

## [Demo] [RealWorld]

This codebase was created to demonstrate a fully fledged fullstack application built with Next.js, Apollo GraphQL stack and Prisma including CRUD operations, authentication, routing, pagination, and more.

## Used Stacks

### backend

- [Prisma] ORM (v4.0 seems supports Node version 14 or later)
- [Apollo Server] mounted on the API route of Next.js pages
- [Nexus] as a code-first GraphQL schema generator

### frontend

- [Next.js]
- [Apollo Client] together with [GraphQL Code Generator]
- [Tailwind CSS]

## Features

- **Pagination**: use Prisma cursor-based query as well as Apollo Client `fetchMore` approach to implement a infinity load-more feature on the feed list and comment list.
- **Form Validation**: including a [Yup] schema check and [React Hook Form] for frontend form validation.

## Folder Structure

- `pages` All pages of a regular Next.js app.
- `pages/api/index.ts`  The API route, mounting a GraphQL server instance within a Prisma client.
- `components` Contains all page components.
- `generated` Codes generated by Nexus and GraphQL Code Generator.
- `lib/api` Schema definitions of the GraphQL server.
- `lib/api/prisma.ts` Prisma client configs here.
- `lib/cache/index.ts` Cache config of Apollo client.
- `lib/schemas` Schema definitions for the frontend.
- `lib/constants.ts` App configs init.
- `prisma/schema.prisma` Definitions of database.
- `config.js` Build configs used in `next.config.original.js`.

## Getting Started

First, install dependencies

```bash
yarn
```

And setup your owner MySQL server config in a `.env` file(see example in `.env.example`)

```env
DATABASE_URL="mysql://root:pass@localhost/real_blog?useUnicode=true&characterEncoding=utf8&useSSL=false"
```

Then run a Prisma migration script on your database

```bash
yarn db:migrate
```

Next, generate a JWK key pairs for the JWT based authentication, this script just print out the key pairs in the console

```bash
yarn generate:jwk
```

You should put the new generated PRIVATE_JWK into the `.env` file and the PUBLIC_JWK to `lib/constants.ts` as below

```env
PRIVATE_JWK={your_generated_private_jwk}
```

```typescript
export const PUBLIC_JWK = {
  kty: 'RSA' as const,
  ...
};
```

Last, run the common Next.js script to start

```bash
yarn dev
```

Point [http://localhost:3000](http://localhost:3000) to the app's home page and [http://localhost:3000/api](http://localhost:3000/api) would redirect to Apollo Studio to show all the GraphQL API(Only accessible in a development env)

## Learn More

To learn more about Next.js, take a look at the following resources:

- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.

You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!

## Deploy on Vercel

The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.

Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

[Demo]:https://next-real-world.vercel.app
[RealWorld]:https://github.com/gothinkster/realworld
[Prisma]:https://github.com/prisma/prisma
[Apollo Server]:https://github.com/apollographql/apollo-server
[Apollo Client]:https://github.com/apollographql/apollo-client
[Nexus]:https://github.com/graphql-nexus/nexus
[GraphQL Code Generator]:https://github.com/dotansimha/graphql-code-generator
[Tailwind CSS]:https://github.com/tailwindlabs/tailwindcss
[Next.js]:https://github.com/vercel/next.js
[Yup]:https://github.com/jquense/yup
[React Hook Form]:https://github.com/react-hook-form/react-hook-form

next-real-world

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README