Nojira | Update nextjs to v13.4.20-canary.12; enable static export; remove use of next image

app/[...slug]/page.tsx

@@ -14,7 +14,7 @@ type ParamsType = {
   slug: string[];
 };
 
-async function generateStaticParams() {
+export async function generateStaticParams() {
   const storyblokApi: StoryblokClient = getStoryblokApi();
   let sbParams: ISbStoriesParams = {
     version: activeEnv === 'development' ? 'draft' : 'published',
@@ -60,7 +60,8 @@ export async function generateMetadata({ params }: { params: ParamsType }): Prom
   const meta = getPageMetadata({ blok, slug });
 
   return meta;
-}
+};
+
 
 export default async function Page({ params }: { params: ParamsType }) {
   const { data } = await getStoryData(params);

components/BracketCard/BracketCard.tsx

@@ -1,5 +1,4 @@
 import { HTMLAttributes } from 'react';
-import Image from 'next/image';
 import { cnb } from 'cnbuilder';
 import { AnimateInView } from '../Animate';
 import { Bracket } from '../Bracket';
@@ -77,7 +76,7 @@ export const BracketCard = ({
         <Grid sm={12} className={styles.imageGrid(textOnLeft)}>
           <div className={styles.imageWrapper(textOnLeft)}>
             <div className={styles.imageAspectRatio}>
-              <Image
+              <img
                 width={900}
                 height={750}
                 src={getProcessedImage(imageSrc, '900x750', imageFocus)}

components/InitiativeCard/InitiativeCard.tsx

@@ -1,5 +1,4 @@
 import { HTMLAttributes } from 'react';
-import Image from 'next/image';
 import { cnb } from 'cnbuilder';
 import { AnimateInView, type AnimationType } from '../Animate';
 import { CtaLink } from '../Cta/CtaLink';
@@ -47,7 +46,7 @@ export const InitiativeCard = ({
     >
       <div className={styles.topWrapper}>
         <div className={styles.imageWrapper}>
-          <Image
+          <img
             width={600}
             height={800}
             alt=""

components/LocalFooter/LocalFooter.tsx

@@ -1,4 +1,3 @@
-import Image from 'next/image';
 import { Paragraph, Heading, Text } from '../Typography';
 import { Container } from '../Container';
 import { Grid } from '../Grid';
@@ -10,7 +9,7 @@ import { initiatives, themes } from '@/utilities/routes';
 
 export const LocalFooter = () => (
   <>
-    <Image
+    <img
       width={2000}
       height={40}
       alt=""

components/Storyblok/SbBasicPage.tsx

@@ -1,5 +1,4 @@
 import { storyblokEditable, type SbBlokData } from '@storyblok/react/rsc';
-import Image from 'next/image';
 import { CreateBloks } from '../CreateBloks';
 import { Hero } from '../Hero/Hero';
 import { Masthead } from '../Masthead';
@@ -33,7 +32,7 @@ export const SbBasicPage = ({
         <Hero heading={title} />
         <CreateBloks blokSection={content} />
         {getNumBloks(ankle) > 0 && (
-          <Image
+          <img
             width={2000}
             height={40}
             alt=""

components/Storyblok/SbHomepage.tsx

@@ -1,5 +1,4 @@
 import { storyblokEditable, type SbBlokData } from '@storyblok/react/rsc';
-import Image from 'next/image';
 import { CreateBloks } from '../CreateBloks';
 import { Heading } from '../Typography';
 import { HomepageHero } from '../Homepage/HomepageHero';
@@ -63,7 +62,7 @@ export const SbHomepagePage = ({
       <div>
         <Heading as="h1" srOnly>{title || 'Homepage'}</Heading>
         <HomepageHero />
-        <Image
+        <img
           width={2000}
           height={40}
           alt=""
@@ -95,7 +94,7 @@ export const SbHomepagePage = ({
           </FindPurposeSection>
         <CreateBloks blokSection={content} />
         {getNumBloks(ankle) > 0 && (
-          <Image
+          <img
             width={2000}
             height={40}
             alt=""

components/Storyblok/SbStory.tsx

@@ -1,5 +1,4 @@
 import { storyblokEditable, type SbBlokData } from '@storyblok/react/rsc';
-import Image from 'next/image';
 import { CreateBloks } from '@/components/CreateBloks';
 import { Masthead } from '@/components/Masthead';
 import { StoryHero, type StoryHeroProps } from '@/components/Hero';
@@ -68,7 +67,7 @@ export const SbStory = ({
               tabColor={tabColor}
               topics={topics}
             />
-            <Image
+            <img
               width={2000}
               height={40}
               alt=""
@@ -101,7 +100,7 @@ export const SbStory = ({
           </>
         )}
         {getNumBloks(blok.ankle) > 0 && (
-          <Image
+          <img
             width={2000}
             height={40}
             alt=""

components/VerticalCard/VerticalCard.tsx

@@ -1,5 +1,4 @@
 import { cnb } from 'cnbuilder';
-import Image from 'next/image';
 import { AnimateInView, type AnimationType } from '../Animate';
 import { CtaLink } from '../Cta/CtaLink';
 import { Heading, type HeadingType, Paragraph } from '../Typography';
@@ -56,7 +55,7 @@ export const VerticalCard = ({
       <div className={styles.cardWrapper}>
         {imageSrc && (
           <div className={styles.imageWrapper}>
-            <Image
+            <img
               alt=""
               width={600}
               height={600}

netlify.toml

@@ -2,7 +2,12 @@
 # ##############################################################################
 [build]
   command = "npm run build"
-  publish = ".next"
+  publish = "out"
+
+[build.environment]
+  # For apps that use next export to generate static HTML
+  # set the NETLIFY_NEXT_PLUGIN_SKIP to true.
+  NETLIFY_NEXT_PLUGIN_SKIP="true"
 
 # PLUGINS
 # ##############################################################################

next.config.js

@@ -1,5 +1,7 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  trailingSlash: true,
+  output: 'export',
   images: {
     remotePatterns: [
       {