This is a starter template for Next.js and Graphql Apollo Server.

Setting the project locally

• Install yarn package manager if not already

• Run the following script for installing all the dependencies

yarn setup

• Create a .env file in the root of the project and add the following variables

JWT_SECRET = YOU_SECRET
MONGODB_URI = mongodb://YOUR_URL

Starting the project in Development mode

Run the following script for concurrently starting graphql server and next.js application

yarn dev

Open http://localhost:4000/graphql with your browser to see the graphiQL interface.

You can perform queries and mutations using this GUI

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

---

What you get with this starter template

With this starter template you get following features

• This starter template comes with the apollo configured for using graphql in next.js application.
• A complete user authentication with graphql server at the backend and sample protected routes in the next.js application.
• Higher order component withAuth, you can wrap thi HOC around any component for authenthicating if the user is logged-in.
• By wrapping a component with withAuth HOC you get {isAuth: Boolean!, user: Object!} as a prop to the child component.
• The project uses authentication header for sending token to verify if the user is logged in although it can be changed if you want to send cookies instead to verify users, for this you have to just make some changes to with-appollo-client.js.

Graphql features that you get wth this project

• You can create/update a user, the databas used is MongoDB although it can be changed easily.
• You can login/register with email and password, the password is stored as a hash using Bcrypt.js.
• You can also listen for events such as when the user is created using subscription.

Next.js features

• Next.js comes with Apollo fully configured.
• It comes with a withAuth HOC.
• It also has Material-UI preconfigured so you can easily start building beautiful UI using this library

Learn More

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

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.
• Graphql
• Apollo Sever