Upgraded next-sanity to version 5. (#155)

.eslintrc.json

@@ -1,3 +1,9 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": "next",
+  "plugins": ["simple-import-sort"],
+  "rules": {
+    "simple-import-sort/imports": "warn",
+    "simple-import-sort/exports": "warn",
+    "react-hooks/exhaustive-deps": "error"
+  }
 }

.github/dependabot.yml

@@ -1,14 +1,13 @@
 version: 2
 updates:
-
   # Maintain dependencies for GitHub Actions
-  - package-ecosystem: "github-actions"
-    directory: "/"
+  - package-ecosystem: 'github-actions'
+    directory: '/'
     schedule:
-      interval: "weekly"
+      interval: 'weekly'
 
   # Maintain dependencies for npm
-  - package-ecosystem: "npm"
-    directory: "/"
+  - package-ecosystem: 'npm'
+    directory: '/'
     schedule:
-      interval: "weekly"
+      interval: 'weekly'

.github/workflows/eslint.yml

@@ -2,9 +2,9 @@ name: ESLint
 
 on:
   push:
-    branches: [ "main" ]
+    branches: ['main']
   pull_request:
-    branches: [ "main" ]
+    branches: ['main']
   schedule:
     - cron: '18 2 * * 0'
 

app/(cms)/studio/[[...index]]/Studio.tsx

@@ -0,0 +1,10 @@
+'use client';
+
+import { NextStudio } from 'next-sanity/studio';
+
+import config from '../../../../sanity.config';
+
+export function Studio() {
+  //  Supports the same props as `import {Studio} from 'sanity'`, `config` is required
+  return <NextStudio config={config} />;
+}

app/(cms)/studio/[[...index]]/page.tsx

@@ -0,0 +1,8 @@
+import { Studio } from './Studio';
+
+// Set the right `viewport`, `robots` and `referer` meta tags
+export { metadata } from 'next-sanity/studio/metadata';
+
+export default function StudioPage() {
+  return <Studio />;
+}

app/countries/[slug]/page.tsx → app/(content)/(pages)/countries/[slug]/page.tsx

@@ -1,9 +1,10 @@
-import { client, getDocumentSlugs } from 'lib/sanityClient';
-import { groq } from 'next-sanity';
-import { ListPosts, Section } from 'components';
 import countryCodeEmoji from 'country-code-emoji';
-import { imageFragment } from 'lib/fragments';
-import { FadeIn } from 'components/animations';
+import { groq } from 'next-sanity';
+
+import { ListPosts, Section } from '~/components';
+import { FadeIn } from '~/components/animations';
+import { imageFragment } from '~/lib/fragments';
+import { client, getDocumentSlugs } from '~/sanity/lib/client';
 
 export const revalidate = 300;
 

app/countries/page.tsx → app/(content)/(pages)/countries/page.tsx

@@ -1,8 +1,9 @@
 import Link from 'next/link';
 import { groq } from 'next-sanity';
-import { client } from 'lib/sanityClient';
-import { Section } from 'components';
-import { FadeIn } from 'components/animations';
+
+import { Section } from '~/components';
+import { FadeIn } from '~/components/animations';
+import { client } from '~/sanity/lib/client';
 
 export const revalidate = 300;
 

app/(content)/(pages)/layout.tsx

@@ -0,0 +1,14 @@
+import { SiteHeader } from '~/components';
+
+export default function ContentLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <SiteHeader />
+      {children}
+    </>
+  );
+}

app/post/[slug]/page.tsx → app/(content)/(pages)/post/[slug]/page.tsx

@@ -1,15 +1,16 @@
 import { groq } from 'next-sanity';
-import { BlogPosting } from 'schema-dts';
 import { JsonLd } from 'react-schemaorg';
+import { BlogPosting } from 'schema-dts';
+
 import {
   CountryList,
   CoverImage,
   Date,
   PortableText,
   Section,
-} from 'components';
-import { imageFragment } from 'lib/fragments';
-import { client, getDocumentSlugs } from 'lib/sanityClient';
+} from '~/components';
+import { imageFragment } from '~/lib/fragments';
+import { client, getDocumentSlugs } from '~/sanity/lib/client';
 
 export const revalidate = 300;
 

app/(content)/layout.tsx

@@ -0,0 +1,14 @@
+import { SiteFooter } from '~/components';
+
+export default function ContentLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      {children}
+      <SiteFooter />
+    </>
+  );
+}

app/page.tsx → app/(content)/page.tsx

@@ -1,8 +1,8 @@
 import { groq } from 'next-sanity';
-import { client } from 'lib/sanityClient';
-import { Intro, ListPosts } from 'components';
-import BaseLayout from './countries/layout';
-import { imageFragment } from 'lib/fragments';
+
+import { Intro, ListPosts } from '~/components';
+import { imageFragment } from '~/lib/fragments';
+import { client } from '~/sanity/lib/client';
 
 export const revalidate = 300;
 
@@ -12,10 +12,10 @@ export default async function Homepage() {
   const posts = await client.fetch<Array<Article>>(postQuery);
 
   return (
-    <BaseLayout hideSiteHeader>
+    <>
       <Intro />
       <ListPosts posts={posts} />
-    </BaseLayout>
+    </>
   );
 }
 

app/layout.tsx

@@ -1,14 +1,21 @@
+import '~/styles/main.css';
+
+import { Inter } from 'next/font/google';
 import Script from 'next/script';
-import '@fontsource/inter/variable.css';
-import 'styles/main.css';
+
+const sans = Inter({
+  variable: '--font-sans',
+  subsets: ['latin'],
+  weight: ['400', '500', '700', '800'],
+});
 
 export default function RootLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en">
+    <html lang="en-GB" className={`${sans.variable}`} suppressHydrationWarning>
       <body>{children}</body>
       <Script
         src="/stats/js/script.js"

next.config.js → next.config.mjs

@@ -10,4 +10,4 @@ const nextConfig = {
   },
 };
 
-module.exports = nextConfig;
+export default nextConfig;