0

I want to make the build of my next.js file but I found an error

./pages/city/[city].js 21:20 Error: React Hook "useRouter" is called in function "city" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use". react-hooks/rules-of-hooks

the code of the [city].js file is

import { useRouter } from 'next/router'
import Head from 'next/head'
import Link from 'next/link'
import CityProfile from '../../components/CityProfile'
import { getAllPostByCity } from '../../helper/post'
import { formControlClasses } from '@mui/material'
const city = (props) => {

    <Head>
        <title>YourGuide &#8211; Real Essence Of Your City</title>
        <meta name="description" content="Generated by create next app" />
        <a rel="icon" href="/favicon.ico" />
        <link
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
            crossOrigin="anonymous"
        />

    </Head>
    const router = useRouter()
    const { city } = router.query

    return <div>
        <CityProfile post={props.post} city={city} />
    </div>

}


export async function getServerSideProps(context) {

    const post = await getAllPostByCity(context.params.city);
    return {
      props: { post }, // will be passed to the page component as props
    }
  }
export default city

I am unable to find the mistake. kindly tell me what I did wrong in the code.

juliomalves
  • 42,130
  • 20
  • 150
  • 146
YourGuide
  • 21
  • 2

2 Answers2

0

Convert the file [city].js to [city].jsx.

React component names must start with an uppercase letter City.

Kiran k
  • 80
  • 5
0

React function component should be in Upper case

from

const city = (props) =>

to

const City = (props) =>
Chemi Adel
  • 1,964
  • 1
  • 10
  • 18