next/head: SEO en Next.js

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

Iniciar sesión

Recursos

Aportes 6

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

Baltazar Andersson

hace 9 meses

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>
  )
}

Enrique Hernández

hace un año

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>
        )
    }
}

Juan Camilo Lentino Villalba

hace 6 meses

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>
  )
}

Hector Lobato

hace un año

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

Freddy J Marin L

hace 7 meses

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;

Jhunior Eduardo Guevara Lázaro

hace 2 meses

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 👍

Si ya tienes una cuenta,

Curso Práctico de Next.js

next/head: SEO en Next.js