Update Next, graphql, libraries. Change GRAPHCM_ > HYGRAPH_

.env.local.example

@@ -0,0 +1,7 @@
+# Hygraph environment variables (example)
+# Copy this file to .env.local and fill in the values
+
+HYGRAPH_ENDPOINT=
+HYGRAPH_TOKEN=
+HYGRAPH_PREVIEW_TOKEN=
+HYGRAPH_PREVIEW_SECRET=

.eslintrc

@@ -1,3 +1,7 @@
 {
-  "extends": "next"
+  "extends": "next",
+  "rules": {
+    "@next/next/no-html-link-for-pages": "off",
+    "@next/next/no-img-element": "off"
+  }
 }

README.md

@@ -42,27 +42,27 @@ yarn dev
 If you want to enable [Next.js Preview Mode](https://nextjs.org/docs/advanced-features/preview-mode) you'll need to add the following to your `.env`:
 
 ```env
-GRAPHCMS_TOKEN=
-GRAPHCMS_PREVIEW_TOKEN=
-GRAPHCMS_PREVIEW_SECRET=
+HYGRAPH_TOKEN=
+HYGRAPH_PREVIEW_TOKEN=
+HYGRAPH_PREVIEW_SECRET=
 ```
 
-### `GRAPHCMS_TOKEN`
+### `HYGRAPH_TOKEN`
 
 This should be a Permanent Auth Token that is set to fetch content from _PUBLISHED_ content stage by default.
 
-### `GRAPHCMS_PREVIEW_TOKEN`
+### `HYGRAPH_PREVIEW_TOKEN`
 
 This should be a Permanent Auth Token that is set to fetch content from _DRAFT_ content stage by default.
 
-## `GRAPHCMS_PREVIEW_SECRET`
+## `HYGRAPH_PREVIEW_SECRET`
 
-You'll need to make sure when configuring the Preview URL inside Hygraph that it passes the same secret value you assigned to `GRAPHCMS_PREVIEW_SECRET`.
+You'll need to make sure when configuring the Preview URL inside Hygraph that it passes the same secret value you assigned to `HYGRAPH_PREVIEW_SECRET`.
 
 You'll need to update both the Page & Blog Post model to add a Preview URL. The URLs should look like this:
 
-- **Page**: `https://[your-domain.com]/api/preview?secret=[GRAPHCMS_PREVIEW_SECRET_VALUE_HERE]&slug={slug}`
-- **Blog Post**: `https://[your-domain.com]/api/preview?secret=[GRAPHCMS_PREVIEW_SECRET_VALUE_HERE]&slug=blog/{slug}`
+- **Page**: `https://[your-domain.com]/api/preview?secret=[HYGRAPH_PREVIEW_SECRET_VALUE_HERE]&slug={slug}`
+- **Blog Post**: `https://[your-domain.com]/api/preview?secret=[HYGRAPH_PREVIEW_SECRET_VALUE_HERE]&slug=blog/{slug}`
 
 ## Features
 

components/blocks/columns/blog-post-card.js

@@ -1,6 +1,6 @@
-import { Box, Flex, Link, Stack, Text } from '@chakra-ui/react'
+import { Box, Flex, Link as ChakraLink, Stack, Text } from '@chakra-ui/react'
 import NextLink from 'next/link'
-import Image from 'next/image'
+import Image from "next/image"
 import startCase from 'lodash.startcase'
 
 export default function BlogPostCard({
@@ -26,7 +26,11 @@ export default function BlogPostCard({
             title={coverImage.title}
             width={coverImage.width}
             height={coverImage.height}
-            objectFit="cover"
+            style={{
+              objectFit: 'cover',
+              width: '100%',
+              height: 'auto',
+            }}
           />
         )}
       </Box>
@@ -42,22 +46,22 @@ export default function BlogPostCard({
           <Text fontSize="sm" fontWeight="medium" color="indigo.600">
             {startCase(category.toLowerCase())}
           </Text>
-          <NextLink href={`/blog/${slug}`}>
-            <Link
-              display="block"
-              mt={2}
-              _hover={{
-                textDecor: 'none'
-              }}
-            >
-              <Text fontSize="xl" fontWeight="semibold" color="gray.900">
-                {title}
-              </Text>
-              <Text mt={3} fontSize="md" color="gray.500">
-                {excerpt}
-              </Text>
-            </Link>
-          </NextLink>
+          <ChakraLink
+            as={NextLink}
+            href={`/blog/${slug}`}
+            display="block"
+            mt={2}
+            _hover={{
+              textDecor: 'none'
+            }}
+          >
+            <Text fontSize="xl" fontWeight="semibold" color="gray.900">
+              {title}
+            </Text>
+            <Text mt={3} fontSize="md" color="gray.500">
+              {excerpt}
+            </Text>
+          </ChakraLink>
         </Box>
         <Flex alignItems="center" mt={6}>
           <Stack
@@ -84,7 +88,10 @@ export default function BlogPostCard({
                     src={author.photo.url}
                     alt={author.name}
                     title={author.name}
-                    layout="fill"
+                    fill
+                    style={{
+                      objectFit: 'cover',
+                    }}
                   />
                 </Box>
               )

components/blocks/columns/person-card.js

@@ -1,4 +1,4 @@
-import Image from 'next/image'
+import Image from "next/image"
 import { Box, HStack, Text } from '@chakra-ui/react'
 
 import { AvatarIcon } from '@/components/icons'
@@ -21,7 +21,10 @@ export default function PersonCard({ name, photo, role }) {
               src={photo.url}
               alt={name}
               title={name}
-              layout="fill"
+              fill
+              style={{
+                objectFit: 'cover',
+              }}
             />
           ) : (
             <Box as={AvatarIcon} h="full" w="full" color="gray.300" />

components/blocks/logo-cloud.js

@@ -1,5 +1,5 @@
 import { Box, Flex, Heading } from '@chakra-ui/react'
-import Image from 'next/image'
+import Image from "next/image"
 
 export default function LogoCloud({ companies, logoCloudTitle }) {
   if (!(logoCloudTitle || companies || companies.length)) return null
@@ -31,8 +31,12 @@ export default function LogoCloud({ companies, logoCloudTitle }) {
                     src={company.logo.url}
                     height={company.logo.height}
                     width={company.logo.width}
-                    layout="responsive"
                     alt={company.logo.title}
+                    unoptimized
+                    style={{
+                      width: '100%',
+                      height: 'auto',
+                    }}
                   />
                 </Box>
               </Flex>

components/blocks/testimonial.js

@@ -1,5 +1,5 @@
 import { Box } from '@chakra-ui/react'
-import Image from 'next/image'
+import Image from "next/image"
 import { MDXRemote } from 'next-mdx-remote'
 
 import { DotsSVG } from '@/svgs'
@@ -28,7 +28,11 @@ export default function Testimonial({ content, person }) {
             <Image
               src={person.company.logo.url}
               alt={person.company.logo.title}
-              layout="fill"
+              fill
+              unoptimized
+              style={{
+                objectFit: 'contain',
+              }}
             />
           </Box>
           <Box as="blockquote" mt={10}>
@@ -55,7 +59,10 @@ export default function Testimonial({ content, person }) {
                       className="avatar"
                       alt={`${person.name} photo`}
                       src={person.photo.url}
-                      layout="fill"
+                      fill
+                      style={{
+                        objectFit: 'cover',
+                      }}
                     />
                   </Box>
                 </Box>

components/button.js

@@ -1,5 +1,5 @@
 import { Box, Link as ChakraLink } from '@chakra-ui/react'
-import Link from 'next/link'
+import NextLink from 'next/link'
 
 const linkDefaultStyles = {
   width: 'full',
@@ -33,11 +33,9 @@ export default function Button({ href, label, theme }) {
 
   return (
     <Box borderRadius="md" boxShadow="md">
-      <Link href={href} passHref>
-        <ChakraLink {...linkDefaultStyles} variant={theme}>
-          {label}
-        </ChakraLink>
-      </Link>
+      <ChakraLink as={NextLink} href={href} {...linkDefaultStyles} variant={theme}>
+        {label}
+      </ChakraLink>
     </Box>
   )
 }

components/footer.js

@@ -9,8 +9,9 @@ import {
   FormLabel,
   Select
 } from '@chakra-ui/react'
-import Link from 'next/link'
+import NextLink from 'next/link'
 import { useRouter } from 'next/router'
+import { useState, useEffect } from 'react'
 
 import { GithubIcon, LinkedInIcon, SlackIcon, TwitterIcon } from '@/icons'
 import { locales } from '@/lib/_locales'
@@ -38,17 +39,17 @@ function GridColumn({ links, title }) {
       <Stack as="ul" mt={4} spacing={4}>
         {links.map((link) => (
           <li key={link.id}>
-            <Link href={`/${link.slug}`} passHref>
-              <ChakraLink
-                color="gray.300"
-                _hover={{
-                  color: 'white'
-                }}
-              >
-                {link.navigationLabel ||
-                  link.slug.charAt(0).toUpperCase() + link.slug.slice(1)}
-              </ChakraLink>
-            </Link>
+            <ChakraLink
+              as={NextLink}
+              href={`/${link.slug}`}
+              color="gray.300"
+              _hover={{
+                color: 'white'
+              }}
+            >
+              {link.navigationLabel ||
+                link.slug.charAt(0).toUpperCase() + link.slug.slice(1)}
+            </ChakraLink>
           </li>
         ))}
       </Stack>
@@ -74,8 +75,13 @@ function SocialMediaLink({ href, title, icon }) {
 
 export default function Footer({ primaryLinks, secondaryLinks }) {
   const router = useRouter()
+  const [mounted, setMounted] = useState(false)
 
-  const activeLocale = locales.find((locale) => locale.value === router.locale)
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  const activeLocale = locales.find((locale) => locale.value === router.locale) || locales[0]
 
   const setLocale = (event) => {
     router.push(router.asPath, router.asPath, { locale: event.target.value })
@@ -120,28 +126,53 @@ export default function Footer({ primaryLinks, secondaryLinks }) {
                 </VisuallyHidden>
 
                 <Box position="relative">
-                  <Select
-                    id="language"
-                    name="language"
-                    color="white"
-                    bg="gray.700"
-                    borderColor="transparent"
-                    fontSize={{ sm: 'sm' }}
-                    value={activeLocale.value}
-                    onChange={setLocale}
-                  >
-                    {locales.map((locale) => (
-                      <Box
-                        as="option"
-                        bg="#374151!important"
-                        color="white"
-                        key={locale.value}
-                        value={locale.value}
-                      >
-                        {locale.label}
-                      </Box>
-                    ))}
-                  </Select>
+                  {mounted ? (
+                    <Select
+                      id="language"
+                      name="language"
+                      color="white"
+                      bg="gray.700"
+                      borderColor="transparent"
+                      fontSize={{ sm: 'sm' }}
+                      value={activeLocale.value}
+                      onChange={setLocale}
+                    >
+                      {locales.map((locale) => (
+                        <Box
+                          as="option"
+                          bg="#374151!important"
+                          color="white"
+                          key={locale.value}
+                          value={locale.value}
+                        >
+                          {locale.label}
+                        </Box>
+                      ))}
+                    </Select>
+                  ) : (
+                    <Select
+                      id="language"
+                      name="language"
+                      color="white"
+                      bg="gray.700"
+                      borderColor="transparent"
+                      fontSize={{ sm: 'sm' }}
+                      value={locales[0].value}
+                      disabled
+                    >
+                      {locales.map((locale) => (
+                        <Box
+                          as="option"
+                          bg="#374151!important"
+                          color="white"
+                          key={locale.value}
+                          value={locale.value}
+                        >
+                          {locale.label}
+                        </Box>
+                      ))}
+                    </Select>
+                  )}
                 </Box>
               </Box>
             </Box>
@@ -186,7 +217,7 @@ export default function Footer({ primaryLinks, secondaryLinks }) {
             color="gray.400"
             order={{ md: 1 }}
           >
-            &copy; {new Date().getFullYear()} GraphCMS GmbH All rights reserved.
+            &copy; {new Date().getFullYear()} Hygraph GmbH All rights reserved.
           </Text>
         </Box>
       </Box>

components/hero.js

@@ -1,5 +1,5 @@
 import { Box, Heading, Stack } from '@chakra-ui/react'
-import Image from 'next/image'
+import Image from "next/image"
 import { MDXRemote } from 'next-mdx-remote'
 
 import Button from '@/components/button'
@@ -78,9 +78,11 @@ export default function Hero({ buttons, image, navigation, page }) {
             src={image.url}
             alt={image.title}
             title={image.title}
-            layout="fill"
+            fill
             priority={true}
-            objectFit="cover"
+            style={{
+              objectFit: 'cover',
+            }}
           />
         </Box>
       </Box>

components/layout/site.js

@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import NextLink from 'next/link'
 import { Flex, Box } from '@chakra-ui/layout'
 
 import Footer from '@/components/footer'
@@ -9,9 +9,7 @@ function PreviewBanner({ enabled = false }) {
   return (
     <Box textAlign="center" p="2" backgroundColor="black" textColor="white">
       Preview Mode Enabled (Content served from DRAFT) &mdash;&nbsp;
-      <Link href="/api/exit-preview">
-        <a>Exit Preview Mode</a>
-      </Link>
+      <NextLink href="/api/exit-preview">Exit Preview Mode</NextLink>
     </Box>
   )
 }