XY Digital

A modern website built using Next.js that would be perfect for any digital agency to showcase their work and experience.

Found at xy-digital.vercel.app, built with Next.js, GraphQL, Prismic.io, Tailwind CSS, Framer Motion and hosted with Vercel.

🛠 Try For Yourself

Step 1. Create an account and a repository on Prismic

First, create an account on Prismic.

After creating an account, create a repository from the dashboard and assign to it a name.

Step 2. Create Prismic custom types

Create types in your Prismic repo with api ids that match the names in the types folder.

For example, create blog_post in Prismic for type types/blog_post.json.

Now copy the JSON from the corresponding JSON files to the JSON editor section of your Prismic custom type editor.

Step 3. Populate content

Go to the Content page, it's in the menu at the top left, then click on Create new.

Create a Home type, a Contact type, at least 1 Blog Post and at least 1 Project.

Fill out each field in each created type.

Important: For each document, remember to click Publish after saving. If not, the document will be in the draft state.

Step 4. Set up environment variables

Follow the instructions here to generate a new Prismic access token.

Follow the instructions here to generate a new Google Maps API key.

Make a SendGrid account and generate an new API key here.

Next, copy the .env.local.example file in this directory to .env.local:

cp .env.local.example .env.local

Then set each variable on .env.local:

• PRISMIC_API_TOKEN should be the Permanent access token you just created.
• PRISMIC_REPOSITORY_NAME is the name of your repository (the one in the URL).
• PRISMIC_REPOSITORY_LOCALE is the locale of your repository (e.g. en-gb).
• NEXT_PUBLIC_SENDGRID_KEY you're newly generated SendGrid API key
• NEXT_PUBLIC_SENDGRID_EMAIL the email you want to use with SendGrid
• NEXT_PUBLIC_GOOGLE_MAPS_KEY you're Google Maps API key API key

Your .env.local file should look like this:

PRISMIC_API_TOKEN=...
PRISMIC_REPOSITORY_NAME=...
PRISMIC_REPOSITORY_LOCALE=...
NEXT_PUBLIC_SENDGRID_KEY=...
NEXT_PUBLIC_SENDGRID_EMAIL=...
NEXT_PUBLIC_GOOGLE_MAPS_KEY=...

Make sure the PRISMIC_REPOSITORY_LOCALE matches your settings in the Prismic dashboard.

Step 6. Install dependencies and run Next.js in development mode

npm install (or yarn)
npm run dev (or yarn dev)