HYGRAPHlix starter + Next

#Overview

Use our HYGRAPHlix starter with Next.js to create a streaming platform.

#Quickstart: Clone the Hygraphlix Next starter

To get up and running quickly with Next and Hygraph, clone Hygraphlix, a composable movie platform starter:

1. Clone the Hygraph project
2. Get the Next code from Github

Install Hygraphlix via terminal:

npx degit https://github.com/lowisren/hygraph-movie-starter/

Alternatively, you can clone Hygraphlix from the Hygraph project directory from the selection of available starters.

#Connecting Hygraph to Next

Change directory to your new Hygraphlix-Next project run npm install to install dependencies.

After initializing permissions, we'll create a .env file by renaming the .env.example file in the root of our Next project.

Add the endpoint URL we copied from Hygraph inside the .env file:

HYGRAPH_ENDPOINT=https://<HYGRAPH_CDN_LOCATION>.cdn.hygraph.com/content/<ID>/master

#Configure Hygraph assets to work with Next

To work with Next image module, you need to specify Hygraph as an image domain by adding the domain URL in the next.config.js file. The Hygraphlix starter uses Hygraph as well as several other image sources. You can add additional image hosts as needed to the remotePatterns array in the Next config file, like so:

// next.config.js for Hygraphlix starter
/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    dangerouslyAllowSVG: true,
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'media.graphassets.com'
      },
      {
        protocol: 'https',
        hostname: 'm.media-amazon.com'
      },
   {
   protocol: 'https',
   hostname: 'vercel.com'
   },
          ]
    },
}
module.exports = nextConfig

Run npm run dev to initialize the app, your site will be available in the browser at http://localhost:3000/.

HYGRAPHlix

Thats it! your Hygraph project is now connected to Next!