NextJS React - Componentes Reutilizables

buscador.js

import React, {useState} from 'react'

export default function Buscador(){
    const [search, setSearch] = useState(String)
    
    let redir = () => {
        window.location.href = `/search?s=${search}`;
    }
    
    return(
            <form onSubmit={e => e.preventDefault() || redir()}>
                <input 
                    className="form-control mr-sm-2" 
                    type="search" 
                    placeholder="Buscar" 
                    aria-label="Search" 
                    width='100%'
                    onChange={e => setSearch(e.target.value)}        
                />
            </form>
    )
}

coords.js

import {useEffect, useState} from 'react'

function useCoordenadas(){
    const [coordenadas, setCoordenadas] = useState({
        latitud: null,
        longitud: null
    });

    let position;

    useEffect(() => {

        position = window.navigator.geolocation.watchPosition(position => {
            setCoordenadas({
                latitud: position.coords.latitude,
                longitud: position.coords.longitude
            });
        });

        return () => {
            navigator.geolocation.clearWatch(position)
        }

    },[])

    return coordenadas;
}

export default function Coordenadas(){
    let coordenadas = useCoordenadas()
    return coordenadas
}

weather.js

import React, { useState, useEffect } from 'react';
import axios from 'axios';

export default () => {

    const [city, setCity ] = useState('santiago')
    const [location, setLocation ] = useState(String)
    const [current, setCurrent ] = useState(String)

    useEffect(() => {
        getWeather()
    },[])
  
    let getWeather = async () => {
        let url = (`https://api.apixu.com/v1/current.json?key=355d04d18783417c88072434180809&q=${city}`)
        await axios.get(url)
        .then(respuesta => {
            setLocation(respuesta.data.location)
            setCurrent(respuesta.data.current)
        })
        .catch(function (error){
            console.log(error)
        })
    }
    return(
            <div className="weather">
                <div className="weatherSearch">
                    <form onSubmit={e => e.preventDefault() || getWeather()}>
                        <input className='form-control' type="text" placeholder='Ciudad' onChange={e => setCity(e.target.value)} required/> <br/>
                        <button className='btn btn-success' type='submit'>Ver Clima</button>
                    </form>
                </div>
                <div className="weatherInfo">
                    <small>
                        <p> <b>Pais:</b> {location.country}</p>
                        <p> <b>Ciudad:</b> {location.name} {location.region} </p>
                        <p> <b>Temperatura:</b> {current.temp_c} Cº </p>
                        <p> <b>Fecha:</b> {location.localtime}</p>
                        <p> <b>KM Visibles:</b> {current.vis_km}</p>
                        <p> <b>Humedad:</b> {current.humidity}</p>
                    </small>
                </div>
                <style jsx>
                    {`
                        .weather{
                            width:160px;
                            padding:10px;
                            background-color:#f8f9fa;
                            border-radius:20px;
                        }
                        .form-control{
                            border-radius:0px;
                            width:100%;
                        }
                        .btn{
                            border-radius:0px;
                            width:100%;
                            margin-bottom:10px;
                        }
                    `}
                </style>
            </div>
    )
}