Vista de lista y vista de detalle con Next y rick & morty API

[charId].js

import { useRouter } from "next/router"

export default function Char(){
    const router = useRouter()
    const {charId} = router.query
    return (
        <h2>Detalle de {charId} </h2>
    )
}

export const getStaticProps = ()=> {
    const data = await (await fetch('https://rickandmortyapi.com/api/character/' + id)).json()
    return {
        props:{
            char:data
        }
    }
}

characters.js

import Link from "next/link";
import CharCard from "../components/CharCard/CharCard";
import Card from '../components/Card/Card';
export default function Chars({chars}){

    return(
        <section>
            <Link href="/">
                <button>
                    Volver
                </button>
            </Link>
            <h2>Personajes</h2>
            <div style={{display:'flex', flexWrap:'wrap'}}>
               {chars.slice(1).map(char=>(
                   <Link
                   href={`/characters/${char.id}`}
                   key={char.id} >
                    <Card 
                    char={char} />
                    </Link>
                ))}
            </div>
        </section>
    )
}

// esto sucede en el server
export const getStaticProps = async()=>{
    const data = await (await fetch('https://rickandmortyapi.com/api/character')).json()
    return {
        props:{
            chars:data.results
        }
    }
}