No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Curso Pr谩ctico de Next.js

Curso Pr谩ctico de Next.js

Oscar Barajas Tavares

Oscar Barajas Tavares

next/head: SEO en Next.js

14/22
Recursos

Aportes 6

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Segun la documentacion de Next, se hace asi

import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

Crear un nuevo archivo llamado 鈥_document.js鈥 dentro de la carpeta pages.

C贸digo:

import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
    render() {
        return (
            <Html lang ='en'>
                <Head>
                    <title>React Shop</title>
                </Head>
                <body>
                    <Main />
                    <NextScript />
                </body>
            </Html>
        )
    }
} 
import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html lang='en'>
      <Head>
        <title>React Shop</title>
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

Archivo _document.js si estas usando Nextui en tu proyecto next

import Document, { Html, Head, Main, NextScript } from 'next/document';
import { CssBaseline } from '@nextui-org/react';

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return {
      ...initialProps,
      styles: <>{initialProps.styles}</>
    };
  }

  render() {
    return (
      <Html lang="en">
        <Head>{CssBaseline.flush()}</Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

Fuente: https://nextui.org/docs/guide/nextui-plus-nextjs

Para quien este en este punto sufriendo de errores como este, les comparto mi codigo con el cual solucione el problema filtrando las publicaciones que segun mi criterio, generan mas problemas.

Este es el error:

Unhandled Runtime Error
Error: Failed to parse src "camara.jpg" on `next/image`, if using relative image it must start with a leading slash "/" or be an absolute URL 

Este es el codigo de useGetProducts

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

const useGetProducts = (API) => {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    (async () => {
      const response = await axios(API);
      setProducts(response.data.filter((item) => {
        return item.id < 200;
      }));
    })();
  }, []);

  return products;
};

export default useGetProducts;

Hasta este punto del curso ya se debe haber resuelto el tema de la api siguiendo los pasos y agregando los host names al next.config.js:

module.exports = {
  reactStrictMode: true,
  images: {
    domains: ['placeimg.com', 'api.lorem.space', 'i.picsum.photos', 'api.escuelajs.co'],
  },
};

buena suerte 馃憤