https://github.com/mobilereality/nextjs-graphql

https://github.com/mobilereality/nextjs-graphql

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/mobilereality/nextjs-graphql
• Owner: MobileReality
• Created: 2023-09-13T07:27:09.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2023-09-14T14:55:41.000Z (over 1 year ago)
• Last Synced: 2024-04-07T01:23:38.532Z (9 months ago)
• Language: TypeScript
• Size: 290 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# NextJS + GraphQL Boilerplate ⚡

🚀 **Next.js with App Router and Page Router Support**

You already have Next.js as a dependency, which provides routing support.

🔍 **Type Checking with TypeScript**

TypeScript is included as a dependency for type checking.

🛡️ **Strict Mode for TypeScript and React 18**

You have React 18, which supports concurrent mode for improved performance.

🔒 **Authentication with NextAuth**

You have "next-auth" as a dependency for authentication.

📝 **Form Handling with React Hook Form**

You have "react-hook-form" as a dependency for form handling.

✅ **Validation Library with Yup**

Yup is included as a dependency for data validation.

🌐 **State Management with Zustand**

You have Zustand as a dependency for global state management.

🔗 **GraphQL Integration**

You have "graphql" as a dependency, which can be used for GraphQL API integration.

🚀 **URQL for GraphQL**

You have several URQL-related dependencies for GraphQL client-side operations.

🌍 **Internationalization (i18n) with Next-i18next and i18next**

You have "next-i18next" and "i18next" for handling internationalization.

📈 **SEO Optimization with Next SEO**

You have "next-seo" for managing SEO metadata.

🗺️ **Sitemap Generation with Next Sitemap**

You have "next-sitemap" for generating sitemaps.

📣 **React Toast Notifications with react-hot-toast**

You have "react-hot-toast" for displaying toast notifications.

💅 **Styled Components for Styling**

You have "styled-components" for styling your components.

🧹 **Linting with ESLint**

You have ESLint as a devDependency for linting purposes.

📜 **Eslint Configuration with Mobile Reality**

You have "@mobile-reality/eslint-config" for ESLint configuration.

🧼 **Code Formatting with Prettier**

Prettier is included as a devDependency for code formatting.

🧪 **Testing with Jest and Styled Components**

You have Jest and "jest-styled-components" for testing styled components.

🌐 **Accessibility Testing with Axe**

You have "@axe-core/react" for accessibility testing.

🛠️ **Webpack Configuration with SVGR**

You have "@svgr/webpack" for optimizing SVGs.

🆔 **UUID Handling with @types/uuid**

You have "@types/uuid" for UUID handling.

✏️ **Inline SVGs with babel-plugin-inline-react-svg**

You have "babel-plugin-inline-react-svg" for inlining SVGs.

> Please note that you may need to configure and integrate these

> dependencies according to your project's specific requirements and use

> cases.

## How to start with boilerplate? 🚀

#### 1 ) Add following environment variables

- NEXT_PUBLIC_SENTRY_DSN  ( from sentry.io )

- NEXT_PUBLIC_APP_URL

- NEXT_PUBLIC_ENV(*)

- NEXTAUTH_SECRET(*)

- NEXTAUTH_URL(*)

> (*) - Preferred to be added as infra container environment

#### 2 ) Authorization  with next-auth

1) Make sure your you have added your environment variables

2) Go to `src/api/graphql/mutations` and implement your login mutation

3)  Go to `src/view/index` and add credentials to verify authorization

#### 3 ) SEO

1) Go to `/public/assets/favicons`, upload your favicons and update site.webmanifest and browserconfig.xml

2) Go to `/public/locales/meta` and update 'main' translations

3) In `/next.config.js` update www to non-www redirect domains

#### 4 ) Search for FIXME

In boilerplate there is some FIXME comments near code fragments that need to be updated