Modernize Next.js code

components/affiliates/AffiliateCard/AffiliateCard.tsx

@@ -27,16 +27,14 @@ const AffiliateCard: FC<AffiliateCardProps> = ({ affiliate }) => {
                     />
                 </div>
                 <div>
-                    <Link href={affiliate.href}>
-                        <a
-                            className={styles.affiliateLink}
-                            href={affiliate.href}
-                            target="_blank"
-                            rel="noreferrer">
-                            <Heading level={3} className={styles.affiliateName}>
-                                {affiliate.headline}
-                            </Heading>
-                        </a>
+                    <Link
+                        href={affiliate.href}
+                        className={styles.affiliateLink}
+                        target="_blank"
+                        rel="noreferrer">
+                        <Heading level={3} className={styles.affiliateName}>
+                            {affiliate.headline}
+                        </Heading>
                     </Link>
 
                     <ReactMarkdown className={styles.description}>
@@ -45,9 +43,9 @@ const AffiliateCard: FC<AffiliateCardProps> = ({ affiliate }) => {
 
                     <div className={styles.cta}>
                         <Link
-                            passHref
                             href={affiliate.href}
                             target="_blank"
+                            rel="noreferrer"
                             className={styles.affiliateLink}>
                             <Button className={styles.button} theme="primary">
                                 {affiliate.callToAction}

components/core/Footer/Footer.tsx

@@ -47,7 +47,7 @@ const Footer: FC = () => {
     return (
         <footer className={styles.footer}>
             <Wrapper className={styles.wrapper}>
-                <Link passHref href="/" className={styles.logoLink}>
+                <Link href="/" className={styles.logoLink}>
                     <Image
                         height="30"
                         width="30"

components/core/Navbar/Navbar.tsx

@@ -59,7 +59,6 @@ const Navbar: FC = () => {
             <Wrapper className={styles.wrapper}>
                 <div className={styles.logoWrapper}>
                     <Link
-                        passHref
                         href="/"
                         className={styles.logo}
                         aria-label="Analysis Tools Homepage">

components/elements/AutocompleteSearch/AutocompleteSearch.tsx

@@ -31,7 +31,7 @@ interface SearchResult {
 
 const Hit = (result: SearchResult) => {
     return (
-        <Link href={result.hit.fields.slug} passHref>
+        <Link href={result.hit.fields.slug}>
             <Highlight attribute="name" hit={result.hit} />
         </Link>
     );

components/sponsors/SponsorCard/SponsorCard.tsx

@@ -27,7 +27,6 @@ const SponsorCard: FC<SponsorCardProps> = ({ sponsor }) => {
             </div>
             <div className={styles.info}>
                 <Link
-                    passHref
                     href={`/tool/${sponsor.tool}`}
                     className={styles.toolLink}>
                     <Heading level={3} className={styles.toolName}>

components/tags/TagsSidebar/FilterCard/FilterCard.tsx

@@ -2,6 +2,7 @@ import { FC } from 'react';
 import { Input } from '@components/elements';
 import { Card } from '@components/layout';
 import { Heading } from '@components/typography';
+import { FilterKey, OnFilterChange } from '@components/tags/types';
 
 import styles from './FilterCard.module.css';
 import classNames from 'classnames';
@@ -14,10 +15,10 @@ export interface FilterOption {
 
 export interface FilterCardProps {
     heading: string;
-    filter: string;
+    filter: FilterKey;
     options: FilterOption[];
     className?: string;
-    onFilterChange: (filter: string, value: string, checked: boolean) => void;
+    onFilterChange: OnFilterChange;
 }
 
 const FilterCard: FC<FilterCardProps> = ({

components/tags/TagsSidebar/FilterCard/LanguageFilterCard.tsx

@@ -48,10 +48,7 @@ const RelatedCard: FC<RelatedCardProps> = ({
                     </li>
                 ))}
                 <li key={'all'}>
-                    <Link
-                        passHref={true}
-                        href={`/tools`}
-                        className={styles.relatedLink}>
+                    <Link href={`/tools`} className={styles.relatedLink}>
                         <Image
                             src={`/assets/icons/general/back.svg`}
                             alt={'Other Languages'}

components/tags/TagsSidebar/TagsSidebar.tsx

@@ -3,6 +3,7 @@ import { BlogPreview } from '@components/blog';
 import { ContributionCard, Newsletter } from '@components/elements';
 import { Sidebar } from '@components/layout';
 import { FilterCard, RelatedCard } from './FilterCard';
+import { OnFilterChange } from '@components/tags/types';
 import styles from './TagsSidebar.module.css';
 
 import {
@@ -17,7 +18,7 @@ import { LanguageFilterOption } from './FilterCard/LanguageFilterCard';
 export interface TagsSidebarProps {
     previews: ArticlePreview[];
     relatedLanguages: LanguageFilterOption[];
-    onFilterChange: (filter: string, value: string, checked: boolean) => void;
+    onFilterChange: OnFilterChange;
 }
 
 const TagsSidebar: FC<TagsSidebarProps> = ({

components/tags/index.ts

@@ -1 +1,2 @@
 export * from './TagsSidebar';
+export * from './types';

components/tags/types.ts

@@ -0,0 +1,23 @@
+/**
+ * Valid filter keys for tool filtering
+ */
+export type FilterKey = 'categories' | 'types' | 'licenses' | 'pricing';
+
+/**
+ * State object for tool filters
+ */
+export interface FiltersState {
+    categories: string[];
+    types: string[];
+    licenses: string[];
+    pricing: string[];
+}
+
+/**
+ * Callback type for filter changes
+ */
+export type OnFilterChange = (
+    filter: FilterKey,
+    value: string,
+    checked: boolean,
+) => void;