Repository files navigation

This is a boilerplate for building applications using Strapi and Next.js. This boilerplate consists of the following:

1. frontend: Next.js application
2. backend: Dockerized Strapi application

• Overview
• Requirements
• Packages
  • 1.Frontend: Next.js application
  • 2.Backend: Dockerized Strapi application
• Installation
  • 1.Clone the application
  • 2.Install necessary dependencies for the frontend application
  • 3.Create a .env file and copy the contents from .env.example (present in frontend directory)
  • 4.Start the frontend application
  • 5.Go inside the directory of the backend package on another terminal window
  • 6.Start docker-compose
• Deployment
  • Frontend application
  • Backend application
• Other interesting repositories
• License

This boilerplate is built using the following technologies:

1. Chakra UI
2. Emotion
3. GraphQL
4. Apollo
5. NextAuth
6. TypeScript

It supports GraphQL Query and Mutation out of the box.

1. Node.js
2. npm
3. Docker

This application is the primary user-facing application. Once it’s up and running (see Development section), it’s available onhttp://localhost:3000/.

Strapi is the leading open-source headless CMS. It’s 100% Javascript, fully customizable and developer-first.

git clone https://github.com/ghoshnirmalya/nextjs-strapi-boilerplate

cd frontend&& yarn install

We might need to run the following command:

source .env

Create a newGoogle OAuth Client and copy the credentials (Client ID and Client Secret) in your .env file.

From the frontend directory, we can run the following command to start our Next.js frontend application:

yarn dev

The above command will start the frontend application onhttp://localhost:3000/.

cd backend

docker-compose up

We need to start Docker and then run the above command which will change the current directory to the backend package’s directory and then start the backend package. If everything goes well, it’ll be up and running onhttp://localhost:1337/graphql.

a. Allow permissions for all operations on the Feed content-type for Authenticated users.

b. Allow permissions for all operations on the Feed content-type for Authenticated users as well.

c. Enable the Google provider.

d. Click on the "Done" button and now we can log into our Next.js application using our Google account.

Click on the button below to deploy the frontend application on Vercel. You'll need tosign up for a free Vercel account.

We're still working on it.

1. Hasura Next.js Boilerplate
2. Hasura Next.js Trello Clone
3. React Search Box
4. LinkedIn Clone using Create React App

This project is licensed under theMIT License.