This is the [....slug.js] file I'm talking about:

import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';
import Link from 'next/link';
import { PageSEO } from '@/components/SEO'; 
import siteMetadata from '@/data/siteMetadata';


// Template component that represents the common structure of your pages
const IndustryPageTemplate = ({ title, content }) => {

  const industries = siteMetadata.industries;

  const router = useRouter(); 
  const { slug } = router.query; 
  const industry = industries[slug] || null; 
 
  const industriesArray = Object.values(industries);
  
  const [selectedIndustry, setSelectedIndustry] = useState(industriesArray[0]);


  const handleChange = (e) => {
    const industry = industriesArray.find(
      (industry) => industry.slug === e.target.value
    );
    setSelectedIndustry(industry);
    router.push(`/industries/${industry.slug}`, undefined, { shallow: true });
  };

  const SEOtitle = `Financing for ` + industry.profession;
  
  return (
    <>
      <PageSEO title={SEOtitle} description={industry.content.replace(/<(.|\n)*?>/g, "").split(" ").slice(0, 160).join(" ")} />
           

You can view SEO.js here: https://ctxt.io/2/AABQYEJPEw

The tags work and everything but only in the browser, not for crawlers?