├── .gitignore ├── .prettierignore ├── .prettierrc ├── .vscode └── settings.json ├── README.md ├── codegen.yml ├── data ├── index.ts └── test.js ├── graphql ├── context │ └── index.ts ├── generated │ └── schemaType.ts ├── resolvers │ ├── index.ts │ ├── place.ts │ ├── review.ts │ └── user.ts ├── schema.graphql ├── scripts │ └── generateSchema.js ├── server │ └── index.ts └── typeDefs │ ├── index.ts │ ├── place.gql │ ├── review.gql │ └── user.gql ├── next-env.d.ts ├── next.config.js ├── package.json ├── pages ├── _app.tsx ├── api │ └── graphql.ts └── index.tsx ├── public ├── favicon.ico └── vercel.svg ├── styles ├── Home.module.css └── globals.css ├── tsconfig.json └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env.local 29 | .env.development.local 30 | .env.test.local 31 | .env.production.local 32 | 33 | # vercel 34 | .vercel 35 | 36 | # typescript 37 | *.tsbuildinfo 38 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .next 3 | public -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 100, 3 | "trailingComma": "es5", 4 | "tabWidth": 2, 5 | "semi": true, 6 | "singleQuote": true 7 | } 8 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.formatOnPaste": true, 3 | "editor.formatOnSave": true, 4 | "editor.defaultFormatter": "esbenp.prettier-vscode", 5 | "[javascript]": { 6 | "editor.defaultFormatter": "esbenp.prettier-vscode" 7 | }, 8 | "[jsonc]": { 9 | "editor.defaultFormatter": "esbenp.prettier-vscode" 10 | } 11 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Advanced Next.js Graphql apollo server starter 2 | 3 | Next.js Graphql apollo server starter , with merge schema , combine resolvers generate type in fast and simple way 4 | 5 | 6 | ``` 7 | Don't forget please to ⭐ this repo 8 | ``` 9 | 10 | ## Install 11 | 12 | ``` 13 | yarn Install 14 | ``` 15 | 16 | ## Generate schema and Type 17 | 18 | ``` 19 | yarn generate 20 | ``` 21 | 22 | ## Getting Started 23 | 24 | First, run the development server: 25 | 26 | ``` 27 | yarn dev 28 | ``` 29 | 30 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 31 | 32 | You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file. 33 | 34 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/graphql](http://localhost:3000/api/graphql). This endpoint can be edited in `pages/api/graphql.ts`. 35 | 36 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. 37 | 38 | ## Learn More 39 | 40 | To learn more about Next.js, take a look at the following resources: 41 | 42 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 43 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 44 | 45 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 46 | 47 | ## Deploy on Vercel 48 | 49 | 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. 50 | 51 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 52 | -------------------------------------------------------------------------------- /codegen.yml: -------------------------------------------------------------------------------- 1 | overwrite: true 2 | schema: 'graphql/schema.graphql' 3 | documents: null 4 | generates: 5 | graphql/generated/schemaType.ts: 6 | plugins: 7 | - 'typescript' 8 | -------------------------------------------------------------------------------- /data/index.ts: -------------------------------------------------------------------------------- 1 | const mainPhoto = 2 | 'https://images.unsplash.com/photo-1566665797739-1674de7a421a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8YmVkcm9vbXxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=600&h=400&q=60'; 3 | 4 | const photos = [mainPhoto]; 5 | 6 | export const users = [ 7 | { 8 | id: '1', 9 | name: 'Salah Lalami', 10 | email: 'hello@lalamisdn.com', 11 | photo: 12 | 'https://res.cloudinary.com/practicaldev/image/fetch/s--AksklHZW--/c_fill,f_auto,fl_progressive,h_320,q_auto,w_320/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/661197/1fd0af9f-3b2f-4b12-a59e-edca17c567b7.jpeg', 13 | }, 14 | { 15 | id: '2', 16 | name: 'Wes bos', 17 | email: 'wes@wesbos.com', 18 | photo: 'https://pbs.twimg.com/profile_images/877525007185858562/7G9vGTca_400x400.jpg', 19 | }, 20 | { 21 | id: '3', 22 | name: 'kent c dods', 23 | email: 'kent@kcc.io', 24 | photo: 'https://pbs.twimg.com/profile_images/1444988463216922631/IDffhy4i_400x400.jpg', 25 | }, 26 | ]; 27 | 28 | export const reviews = [ 29 | { 30 | id: '1', 31 | author: users[0], 32 | feedback: 'amazing appartment , close to centre , restaurent, metro station', 33 | rate: 5, 34 | place: '1', 35 | }, 36 | { 37 | id: '2', 38 | author: users[0], 39 | feedback: 'really cool place , Thank you', 40 | rate: 5, 41 | place: '1', 42 | }, 43 | { 44 | id: '3', 45 | author: users[2], 46 | feedback: 'Just Love It', 47 | rate: 4, 48 | place: '1', 49 | }, 50 | ]; 51 | 52 | export const places = [ 53 | { 54 | id: '1', 55 | owner: users[0], 56 | type: 'appartment', 57 | desciption: 'Cozy appatment with two bedrooms in central of London', 58 | mainPhoto, 59 | photos, 60 | priceByNight: 89, 61 | reviews, 62 | }, 63 | ]; 64 | -------------------------------------------------------------------------------- /data/test.js: -------------------------------------------------------------------------------- 1 | const users = [ 2 | { 3 | id: '1', 4 | name: 'Salah Lalami', 5 | email: 'hello@lalamisdn.com', 6 | photo: 7 | 'https://res.cloudinary.com/practicaldev/image/fetch/s--AksklHZW--/c_fill,f_auto,fl_progressive,h_320,q_auto,w_320/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/661197/1fd0af9f-3b2f-4b12-a59e-edca17c567b7.jpeg', 8 | }, 9 | { 10 | id: '2', 11 | name: 'Wes bos', 12 | email: 'wes@wesbos.com', 13 | photo: 'https://pbs.twimg.com/profile_images/877525007185858562/7G9vGTca_400x400.jpg', 14 | }, 15 | { 16 | id: '3', 17 | name: 'kent c dods', 18 | email: 'kent@kcc.io', 19 | photo: 'https://pbs.twimg.com/profile_images/1444988463216922631/IDffhy4i_400x400.jpg', 20 | }, 21 | ]; 22 | const reviews = [ 23 | { 24 | id: '1', 25 | author: users[0], 26 | feedback: 'amazing appartment , close to centre , restaurent, metro station', 27 | rate: 5, 28 | place: '1', 29 | }, 30 | { 31 | id: '2', 32 | author: users[0], 33 | feedback: 'really cool place , Thank you', 34 | rate: 5, 35 | place: '1', 36 | }, 37 | { 38 | id: '3', 39 | author: users[2], 40 | feedback: 'Just Love It', 41 | rate: 4, 42 | place: '1', 43 | }, 44 | ]; 45 | 46 | console.log(reviews.filter((x) => x.author.id == '1')); 47 | -------------------------------------------------------------------------------- /graphql/context/index.ts: -------------------------------------------------------------------------------- 1 | // import { PrismaClient } from '@prisma/client'; 2 | // import prisma from '@/lib/prisma'; 3 | // import { getSession } from 'next-auth/react'; 4 | 5 | export type Context = { 6 | session: any; // TODO: set session types 7 | }; 8 | 9 | export function createContext({}) { 10 | // const session = await getSession({ req }); // TODO: credentials not working on graphql studio (/api/graphql) 11 | return { 12 | session: { isAuth: true }, 13 | }; 14 | } 15 | -------------------------------------------------------------------------------- /graphql/generated/schemaType.ts: -------------------------------------------------------------------------------- 1 | export type Maybe = T | null; 2 | export type InputMaybe = Maybe; 3 | export type Exact = { [K in keyof T]: T[K] }; 4 | export type MakeOptional = Omit & { [SubKey in K]?: Maybe }; 5 | export type MakeMaybe = Omit & { [SubKey in K]: Maybe }; 6 | /** All built-in and custom scalars, mapped to their actual values */ 7 | export type Scalars = { 8 | ID: string; 9 | String: string; 10 | Boolean: boolean; 11 | Int: number; 12 | Float: number; 13 | }; 14 | 15 | export type Mutation = { 16 | __typename?: 'Mutation'; 17 | addPlace?: Maybe; 18 | addReview?: Maybe; 19 | addUser: User; 20 | }; 21 | 22 | 23 | export type MutationAddPlaceArgs = { 24 | body?: InputMaybe; 25 | }; 26 | 27 | 28 | export type MutationAddReviewArgs = { 29 | body?: InputMaybe; 30 | }; 31 | 32 | 33 | export type MutationAddUserArgs = { 34 | body?: InputMaybe; 35 | }; 36 | 37 | export type Place = { 38 | __typename?: 'Place'; 39 | desciption?: Maybe; 40 | id?: Maybe; 41 | mainPhoto?: Maybe; 42 | owner?: Maybe; 43 | photos?: Maybe>>; 44 | priceByNight?: Maybe; 45 | reviews?: Maybe>>; 46 | }; 47 | 48 | export type Query = { 49 | __typename?: 'Query'; 50 | place?: Maybe; 51 | placeList?: Maybe>>; 52 | reviewByUser?: Maybe>>; 53 | user: User; 54 | userList: Array; 55 | }; 56 | 57 | 58 | export type QueryPlaceArgs = { 59 | id?: InputMaybe; 60 | }; 61 | 62 | 63 | export type QueryReviewByUserArgs = { 64 | id?: InputMaybe; 65 | }; 66 | 67 | 68 | export type QueryUserArgs = { 69 | id: Scalars['ID']; 70 | }; 71 | 72 | export type Review = { 73 | __typename?: 'Review'; 74 | author?: Maybe; 75 | feedback?: Maybe; 76 | id?: Maybe; 77 | place?: Maybe; 78 | rate?: Maybe; 79 | }; 80 | 81 | export type User = { 82 | __typename?: 'User'; 83 | email: Scalars['String']; 84 | id: Scalars['ID']; 85 | name?: Maybe; 86 | photo: Scalars['String']; 87 | }; 88 | 89 | export type InputPlaceType = { 90 | desciption?: InputMaybe; 91 | mainPhoto?: InputMaybe; 92 | photos?: InputMaybe>>; 93 | priceByNight?: InputMaybe; 94 | type?: InputMaybe; 95 | }; 96 | 97 | export type InputReviewType = { 98 | feedback?: InputMaybe; 99 | id?: InputMaybe; 100 | place?: InputMaybe; 101 | rate?: InputMaybe; 102 | }; 103 | 104 | export type InputUserType = { 105 | email: Scalars['String']; 106 | name: Scalars['String']; 107 | }; 108 | -------------------------------------------------------------------------------- /graphql/resolvers/index.ts: -------------------------------------------------------------------------------- 1 | import { combineResolvers, resolverType } from 'fast-graphql'; 2 | 3 | import user from './user'; 4 | import place from './place'; 5 | import review from './review'; 6 | 7 | const resolvers: resolverType[] = [place, user, review]; 8 | 9 | const cominedResolvers = combineResolvers({ resolvers }); 10 | 11 | export default cominedResolvers; 12 | -------------------------------------------------------------------------------- /graphql/resolvers/place.ts: -------------------------------------------------------------------------------- 1 | import { resolverType } from 'fast-graphql'; 2 | import { places } from '@/data'; 3 | 4 | import * as schema from '@/graphql/generated/schemaType'; 5 | 6 | const Query = { 7 | placeList: (parent: any, args: any, ctx: any): schema.Query['placeList'] => { 8 | return places; 9 | }, 10 | 11 | place: (parent: any, args: any, ctx: any) => { 12 | return places.find((x) => x.id == args.id); 13 | }, 14 | }; 15 | 16 | const Mutation = { 17 | addPlace: (parent: any, args: any, ctx: any) => { 18 | return { title: 'this is addPlace mutuation' }; 19 | }, 20 | }; 21 | 22 | const resolver: resolverType = { Query, Mutation }; 23 | 24 | export default resolver; 25 | -------------------------------------------------------------------------------- /graphql/resolvers/review.ts: -------------------------------------------------------------------------------- 1 | import { resolverType } from 'fast-graphql'; 2 | import { reviews } from '@/data'; 3 | 4 | const Query = { 5 | reviewByUser: (parent: any, args: any, ctx: any) => { 6 | return reviews.filter((x) => x.id == args.id); 7 | }, 8 | }; 9 | 10 | const Mutation = { 11 | addReview: (parent: any, args: any, ctx: any) => { 12 | return { name: 'this is addReview mutuation' }; 13 | }, 14 | }; 15 | 16 | const resolver: resolverType = { Query, Mutation }; 17 | 18 | export default resolver; 19 | -------------------------------------------------------------------------------- /graphql/resolvers/user.ts: -------------------------------------------------------------------------------- 1 | import { resolverType } from 'fast-graphql'; 2 | import { users } from '@/data'; 3 | import * as schemaType from '@/graphql/generated/schemaType'; 4 | 5 | const Query = { 6 | userList: (parent: any, args: any, ctx: any) => { 7 | return users; 8 | }, 9 | 10 | user: (parent: any, args: any, ctx: any) => { 11 | return users.find((x) => x.id == args.id); 12 | }, 13 | }; 14 | 15 | const Mutation = { 16 | addUser: (parent: any, args: any, ctx: any) => { 17 | return { name: 'this is addUser mutuation' }; 18 | }, 19 | }; 20 | 21 | const resolver: resolverType = { Query, Mutation }; 22 | 23 | export default resolver; 24 | -------------------------------------------------------------------------------- /graphql/schema.graphql: -------------------------------------------------------------------------------- 1 | type Place { 2 | id: ID 3 | owner: User 4 | desciption: String 5 | mainPhoto: String 6 | photos: [String] 7 | priceByNight: Float 8 | reviews: [Review] 9 | } 10 | 11 | input inputPlaceType { 12 | type: String 13 | desciption: String 14 | mainPhoto: String 15 | photos: [String] 16 | priceByNight: Float 17 | } 18 | 19 | type Mutation { 20 | addPlace(body: inputPlaceType): Place 21 | } 22 | 23 | type Query { 24 | placeList: [Place] 25 | place(id: ID): Place 26 | } 27 | type Review { 28 | id: ID 29 | author: User 30 | feedback: String 31 | rate: Float 32 | place: ID 33 | } 34 | 35 | type Query { 36 | reviewByUser(id: ID): [Review] 37 | } 38 | 39 | input inputReviewType { 40 | id: ID 41 | feedback: String 42 | rate: Float 43 | place: ID 44 | } 45 | 46 | type Mutation { 47 | addReview(body: inputReviewType): Review 48 | } 49 | type User { 50 | id: ID! 51 | name: String 52 | email: String! 53 | photo: String! 54 | } 55 | 56 | input inputUserType { 57 | name: String! 58 | email: String! 59 | } 60 | 61 | type Query { 62 | userList: [User!]! 63 | user(id: ID!): User! 64 | } 65 | 66 | type Mutation { 67 | addUser(body: inputUserType): User! 68 | } 69 | -------------------------------------------------------------------------------- /graphql/scripts/generateSchema.js: -------------------------------------------------------------------------------- 1 | const { generateSchema } = require('fast-graphql'); 2 | 3 | const inputPath = './graphql/typeDefs/*.gql'; 4 | const schemaPath = './graphql/schema.graphql'; 5 | const typeDefsPath = './graphql/typeDefs/index.ts'; 6 | 7 | generateSchema({ inputPath, schemaPath, typeDefsPath }); 8 | -------------------------------------------------------------------------------- /graphql/server/index.ts: -------------------------------------------------------------------------------- 1 | import type { NextApiRequest, NextApiResponse } from 'next'; 2 | import { ApolloServer } from 'apollo-server-micro'; 3 | 4 | import { createContext } from '@/graphql/context'; 5 | 6 | import typeDefs from '@/graphql/typeDefs'; 7 | import resolvers from '@/graphql/resolvers'; 8 | 9 | const apolloServer = new ApolloServer({ 10 | typeDefs, 11 | resolvers, 12 | context: createContext, 13 | }); 14 | const startServer = apolloServer.start(); 15 | 16 | export default async function graphqlServer({ 17 | req, 18 | res, 19 | serverConfig = {}, 20 | }: { 21 | req: NextApiRequest; 22 | res: NextApiResponse; 23 | serverConfig?: any; 24 | }) { 25 | res.setHeader('Access-Control-Allow-Credentials', 'true'); 26 | res.setHeader('Access-Control-Allow-Origin', '*'); 27 | res.setHeader('Access-Control-Allow-Headers', '*'); 28 | if (req.method === 'OPTIONS') { 29 | res.end(); 30 | return false; 31 | } 32 | 33 | await startServer; 34 | await apolloServer.createHandler({ 35 | path: '/api/graphql', 36 | })(req, res); 37 | } 38 | -------------------------------------------------------------------------------- /graphql/typeDefs/index.ts: -------------------------------------------------------------------------------- 1 | export default `type Place { 2 | id: ID 3 | owner: User 4 | desciption: String 5 | mainPhoto: String 6 | photos: [String] 7 | priceByNight: Float 8 | reviews: [Review] 9 | } 10 | 11 | input inputPlaceType { 12 | type: String 13 | desciption: String 14 | mainPhoto: String 15 | photos: [String] 16 | priceByNight: Float 17 | } 18 | 19 | type Mutation { 20 | addPlace(body: inputPlaceType): Place 21 | } 22 | 23 | type Query { 24 | placeList: [Place] 25 | place(id: ID): Place 26 | } 27 | type Review { 28 | id: ID 29 | author: User 30 | feedback: String 31 | rate: Float 32 | place: ID 33 | } 34 | 35 | type Query { 36 | reviewByUser(id: ID): [Review] 37 | } 38 | 39 | input inputReviewType { 40 | id: ID 41 | feedback: String 42 | rate: Float 43 | place: ID 44 | } 45 | 46 | type Mutation { 47 | addReview(body: inputReviewType): Review 48 | } 49 | type User { 50 | id: ID! 51 | name: String 52 | email: String! 53 | photo: String! 54 | } 55 | 56 | input inputUserType { 57 | name: String! 58 | email: String! 59 | } 60 | 61 | type Query { 62 | userList: [User!]! 63 | user(id: ID!): User! 64 | } 65 | 66 | type Mutation { 67 | addUser(body: inputUserType): User! 68 | } 69 | `; -------------------------------------------------------------------------------- /graphql/typeDefs/place.gql: -------------------------------------------------------------------------------- 1 | type Place { 2 | id: ID 3 | owner: User 4 | desciption: String 5 | mainPhoto: String 6 | photos: [String] 7 | priceByNight: Float 8 | reviews: [Review] 9 | } 10 | 11 | input inputPlaceType { 12 | type: String 13 | desciption: String 14 | mainPhoto: String 15 | photos: [String] 16 | priceByNight: Float 17 | } 18 | 19 | type Mutation { 20 | addPlace(body: inputPlaceType): Place 21 | } 22 | 23 | type Query { 24 | placeList: [Place] 25 | place(id: ID): Place 26 | } 27 | -------------------------------------------------------------------------------- /graphql/typeDefs/review.gql: -------------------------------------------------------------------------------- 1 | type Review { 2 | id: ID 3 | author: User 4 | feedback: String 5 | rate: Float 6 | place: ID 7 | } 8 | 9 | type Query { 10 | reviewByUser(id: ID): [Review] 11 | } 12 | 13 | input inputReviewType { 14 | id: ID 15 | feedback: String 16 | rate: Float 17 | place: ID 18 | } 19 | 20 | type Mutation { 21 | addReview(body: inputReviewType): Review 22 | } 23 | -------------------------------------------------------------------------------- /graphql/typeDefs/user.gql: -------------------------------------------------------------------------------- 1 | type User { 2 | id: ID! 3 | name: String 4 | email: String! 5 | photo: String! 6 | } 7 | 8 | input inputUserType { 9 | name: String! 10 | email: String! 11 | } 12 | 13 | type Query { 14 | userList: [User!]! 15 | user(id: ID!): User! 16 | } 17 | 18 | type Mutation { 19 | addUser(body: inputUserType): User! 20 | } 21 | -------------------------------------------------------------------------------- /next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | /// 4 | 5 | // NOTE: This file should not be edited 6 | // see https://nextjs.org/docs/basic-features/typescript for more information. 7 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | module.exports = { 3 | reactStrictMode: true, 4 | }; 5 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "next-js-graphql-starter", 3 | "private": false, 4 | "description": "Starter Next.js with apollo graphql server auto generetated schema", 5 | "keywords": [ 6 | "graphql,tools,schema,merge,combine,resolvers,fast,simple,starter,nextjs,typescript" 7 | ], 8 | "author": "Salah Eddine Lalami", 9 | "license": "MIT", 10 | "scripts": { 11 | "dev": "yarn generate && next dev", 12 | "build": "next build", 13 | "start": "next start", 14 | "lint": "next lint", 15 | "generate": "yarn schema && graphql-codegen --config codegen.yml", 16 | "schema": "node ./graphql/scripts/generateSchema" 17 | }, 18 | "dependencies": { 19 | "@graphql-codegen/cli": "^2.3.1", 20 | "@graphql-codegen/typescript": "^2.4.2", 21 | "apollo-server-micro": "^3.5.0", 22 | "fast-graphql": "^2.0.2", 23 | "graphql": "^16.1.0", 24 | "micro": "^9.3.4", 25 | "next": "12.0.4", 26 | "react": "17.0.2", 27 | "react-dom": "17.0.2" 28 | }, 29 | "devDependencies": { 30 | "@types/node": "16.11.7", 31 | "@types/react": "17.0.35", 32 | "eslint": "7.32.0", 33 | "eslint-config-next": "12.0.4", 34 | "eslint-config-prettier": "^8.3.0", 35 | "prettier": "^2.4.1", 36 | "typescript": "4.5.2" 37 | }, 38 | "lint-staged": { 39 | "**/*": "prettier --write --ignore-unknown" 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /pages/_app.tsx: -------------------------------------------------------------------------------- 1 | import "../styles/globals.css"; 2 | import type { AppProps } from "next/app"; 3 | 4 | function MyApp({ Component, pageProps }: AppProps) { 5 | return ; 6 | } 7 | 8 | export default MyApp; 9 | -------------------------------------------------------------------------------- /pages/api/graphql.ts: -------------------------------------------------------------------------------- 1 | import type { NextApiRequest, NextApiResponse } from 'next'; 2 | import graphqlServer from '@/graphql/server'; 3 | 4 | export default async function handler( 5 | req: NextApiRequest, 6 | res: NextApiResponse 7 | ) { 8 | await graphqlServer({ req, res }); 9 | } 10 | 11 | export const config = { 12 | api: { 13 | bodyParser: false, 14 | }, 15 | }; 16 | -------------------------------------------------------------------------------- /pages/index.tsx: -------------------------------------------------------------------------------- 1 | import type { NextPage } from 'next'; 2 | 3 | import Head from 'next/head'; 4 | 5 | import styles from '@/styles/Home.module.css'; 6 | 7 | const Home: NextPage = () => { 8 | return ( 9 |
10 | 11 | Create Next App 12 | 13 | 14 | 15 | 16 |
17 |

updated main page

18 | Image 24 |
25 | 26 | 35 |
36 | ); 37 | }; 38 | 39 | export default Home; 40 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/idurar/next-js-graphql-apollo-server-starter/e3b195b46b951c05f6f72a194c31323a88658053/public/favicon.ico -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | -------------------------------------------------------------------------------- /styles/Home.module.css: -------------------------------------------------------------------------------- 1 | .container { 2 | padding: 0 2rem; 3 | } 4 | 5 | .main { 6 | min-height: 100vh; 7 | padding: 4rem 0; 8 | flex: 1; 9 | display: flex; 10 | flex-direction: column; 11 | justify-content: center; 12 | align-items: center; 13 | } 14 | 15 | .footer { 16 | display: flex; 17 | flex: 1; 18 | padding: 2rem 0; 19 | border-top: 1px solid #eaeaea; 20 | justify-content: center; 21 | align-items: center; 22 | } 23 | 24 | .footer a { 25 | display: flex; 26 | justify-content: center; 27 | align-items: center; 28 | flex-grow: 1; 29 | } 30 | 31 | .title a { 32 | color: #0070f3; 33 | text-decoration: none; 34 | } 35 | 36 | .title a:hover, 37 | .title a:focus, 38 | .title a:active { 39 | text-decoration: underline; 40 | } 41 | 42 | .title { 43 | margin: 0; 44 | line-height: 1.15; 45 | font-size: 4rem; 46 | } 47 | 48 | .title, 49 | .description { 50 | text-align: center; 51 | } 52 | 53 | .description { 54 | margin: 4rem 0; 55 | line-height: 1.5; 56 | font-size: 1.5rem; 57 | } 58 | 59 | .code { 60 | background: #fafafa; 61 | border-radius: 5px; 62 | padding: 0.75rem; 63 | font-size: 1.1rem; 64 | font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, 65 | Bitstream Vera Sans Mono, Courier New, monospace; 66 | } 67 | 68 | .grid { 69 | display: flex; 70 | align-items: center; 71 | justify-content: center; 72 | flex-wrap: wrap; 73 | max-width: 800px; 74 | } 75 | 76 | .card { 77 | margin: 1rem; 78 | padding: 1.5rem; 79 | text-align: left; 80 | color: inherit; 81 | text-decoration: none; 82 | border: 1px solid #eaeaea; 83 | border-radius: 10px; 84 | transition: color 0.15s ease, border-color 0.15s ease; 85 | max-width: 300px; 86 | } 87 | 88 | .card:hover, 89 | .card:focus, 90 | .card:active { 91 | color: #0070f3; 92 | border-color: #0070f3; 93 | } 94 | 95 | .card h2 { 96 | margin: 0 0 1rem 0; 97 | font-size: 1.5rem; 98 | } 99 | 100 | .card p { 101 | margin: 0; 102 | font-size: 1.25rem; 103 | line-height: 1.5; 104 | } 105 | 106 | .logo { 107 | height: 1em; 108 | margin-left: 0.5rem; 109 | } 110 | 111 | @media (max-width: 600px) { 112 | .grid { 113 | width: 100%; 114 | flex-direction: column; 115 | } 116 | } 117 | -------------------------------------------------------------------------------- /styles/globals.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | padding: 0; 4 | margin: 0; 5 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, 6 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; 7 | } 8 | 9 | a { 10 | color: inherit; 11 | text-decoration: none; 12 | } 13 | 14 | * { 15 | box-sizing: border-box; 16 | } 17 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": ".", 4 | "target": "es5", 5 | "lib": [ 6 | "dom", 7 | "dom.iterable", 8 | "esnext" 9 | ], 10 | "allowJs": true, 11 | "skipLibCheck": true, 12 | "strict": true, 13 | "forceConsistentCasingInFileNames": true, 14 | "noEmit": true, 15 | "esModuleInterop": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "jsx": "preserve", 21 | "incremental": true, 22 | "paths": { 23 | "@/*": [ 24 | "./*" 25 | ] 26 | } 27 | }, 28 | "include": [ 29 | "next-env.d.ts", 30 | "**/*.ts", 31 | "**/*.tsx", 32 | ], 33 | "exclude": [ 34 | "node_modules" 35 | ] 36 | } 37 | 38 | --------------------------------------------------------------------------------