Cómo crear un blog con Next y MDX

 

 

 

  • Implemente rápidamente. Implementar inteligentemente
  • Creación y mantenimiento de sistemas de diseño exitosos, con Brad Fost

  • Índice
    1. ¿Qué es Next.js?
    2. ¿Por qué utilizar Next.js en lugar de la aplicación Create React?
    3. Next.js versus Gatsby
      1. Configuración
      2. Instalación de la biblioteca MDX
      3. Configurando el next.config.jsarchivo
      4. Obteniendo publicaciones de blog
      5. Construyendo los componentes
      6. Escribir publicaciones con MDX
      7. Mostrando publicaciones
      8. Usando el _app.jsarchivo
    4. Conclusión
      1. Recursos

    En esta guía, veremos Next.js, un marco de React popular que ofrece una excelente experiencia para desarrolladores y viene con todas las características que necesita para la producción. También crearemos un blog, paso a paso, utilizando Next.js y MDX. Finalmente, cubriremos por qué optaría por Next.js en lugar de React “vainilla” y alternativas como Gatsby.

     

    Next.js es un marco de React que le permite crear aplicaciones estáticas y dinámicas rápidamente. Está listo para producción y admite renderizado del lado del servidor y generación de sitios estáticos listos para usar, lo que hace que las aplicaciones Next.js sean rápidas y compatibles con SEO.

    En este tutorial, primero explicaré qué es exactamente Next.js y por qué lo usarías en lugar de Create React App o Gatsby. Luego, te mostraré cómo crear un blog en el que puedas escribir y representar publicaciones usando Next.js y MDX.

    Para comenzar, necesitará algo de experiencia con React. El conocimiento de Next.js sería útil, pero no es obligatorio. Este tutorial beneficiaría a aquellos que quieran crear un blog (personal u organizacional) usando Next.js o que todavía estén buscando qué usar.

    Vamos a sumergirnos.

     

    ¿Qué es Next.js?

    Next.js es un marco React creado y mantenido por Vercel . Está construido con React, Node.js, Babel y Webpack. Está listo para producción porque viene con muchas funciones excelentes que normalmente se configurarían en una aplicación React “básica”.

    El marco Next.js puede representar aplicaciones en el servidor o exportarlas estáticamente. No espera a que el navegador cargue JavaScript para mostrar el contenido, lo que hace que las aplicaciones Next.js sean increíblemente rápidas y compatibles con SEO.

    ¿Por qué utilizar Next.js en lugar de la aplicación Create React?

    Create React App es una herramienta útil que ofrece una configuración de compilación moderna sin configuración y sin la molestia de tener que configurar Webpack, Babel, etc., o tener que mantener sus dependencias. Es la forma recomendada de crear aplicaciones React hoy en día. Tiene una plantilla para TypeScript y también viene con la biblioteca de pruebas React.

    Sin embargo, si desea crear una aplicación de varias páginas, deberá instalar una biblioteca adicional, como si estuviera renderizando una aplicación React en el servidor. La configuración adicional podría ser un problema y cualquier paquete instalado podría aumentar el tamaño del paquete final de su aplicación.

    Este es exactamente el problema que Next.js pretende resolver. Ofrece la mejor experiencia de desarrollador, con todo lo que necesita para la producción. Viene con varias características interesantes:

    • Exportación estática (renderizado previo)
      Next.js le permite exportar su aplicación Next.js en el momento de la compilación a HTML estático que se ejecuta sin un servidor. Es la forma recomendada de generar su sitio web porque se realiza en el momento de la construcción y no en cada solicitud.
    • Representación del lado del servidor (pre-renderizado)
      Pre-renderiza páginas en HTML en el servidor ante cada solicitud.
    • División automática de código
      A diferencia de React, Next.js divide el código automáticamente y solo carga el JavaScript necesario, lo que hace que la aplicación sea rápida.
    • Enrutamiento basado en sistema de archivos
      Next.js utiliza el sistema de archivos para habilitar el enrutamiento en la aplicación, lo que significa que cada archivo del pagesdirectorio se tratará automáticamente como una ruta.
    • Recarga de código en caliente
      Next.js se basa en React Fast Refresh para recargar su código en caliente, lo que ofrece una excelente experiencia para desarrolladores.
    • Opciones de estilo
      El marco Next.js tiene soporte integrado para Styled JSX, módulos CSS, Sass, LESS y más.

    Next.js versus Gatsby

    Gatsby es un generador de sitios estáticos construido sobre React y GraphQL. Es popular y tiene un ecosistema enorme que proporciona temas, complementos, recetas, etc.

    Los sitios web Gatsby y Next.js son súper rápidos porque ambos se procesan en el servidor o de forma estática, lo que significa que el código JavaScript no espera a que se cargue el navegador. Comparémoslos según la experiencia del desarrollador.

    Gatsby es fácil para empezar, especialmente si ya conoces React. Sin embargo, Gatsby usa GraphQL para consultar páginas y datos locales. Usar Gatsby para crear este blog simple puede ser excesivo porque GraphQL tiene una curva de aprendizaje y el tiempo de consulta y creación de páginas estáticas sería un poco más largo. Si creó este mismo blog dos veces, primero con Gatsby y luego con Next.js, el que se creó con Next.js sería mucho más rápido en el momento de la compilación porque utiliza JavaScript normal para consultar datos y páginas locales.

     

    Espero que aproveches el poder del marco Next.js y veas por qué es mucho más útil que algunas alternativas. También es una excelente opción si su sitio web depende en gran medida del SEO porque su aplicación será rápida y fácil de rastrear para los robots de Google. Esa es la razón por la que usaremos Next.js en este artículo para crear un blog con la biblioteca MDX.

    Comencemos configurando una nueva aplicación Next.js.

    Configuración

    Hay dos formas de crear una aplicación Next.js. Podemos configurar una nueva aplicación manualmente o usar Crear siguiente aplicación. Optaremos por esta última porque es la forma recomendada y configurará todo automáticamente para nosotros.

    Para iniciar una nueva aplicación, ejecute lo siguiente en la interfaz de línea de comandos (CLI):

    npx create-next-app

    Una vez que se inicializa el proyecto, estructuremos la aplicación Next.js de la siguiente manera:

    src├── components| ├── BlogPost.js| ├── Header.js| ├── HeadPost.js| ├── Layout.js| └── Post.js├── pages| ├── blog| | ├── post-1| | | └── index.mdx| | ├── post-2| | | └── index.mdx| | └── post-3| | └── index.mdx| ├── index.js| └── _app.js├── getAllPosts.js├── next.config.js├── package.json├── README.md└── yarn.lock

    Como puede ver, nuestro proyecto tiene una estructura de archivos simple. Hay tres cosas a tener en cuenta:

    • _app.jsnos permite agregar algo de contenido al App.jscomponente para hacerlo global.
    • getAllPosts.jsnos ayuda a recuperar las publicaciones del blog de la carpeta pages/blog. Por cierto, puedes nombrar el archivo como quieras.
    • next.config.jses el archivo de configuración para nuestra aplicación Next.js.

    Volveré a cada archivo más tarde y explicaré lo que hace. Por ahora, veamos el paquete MDX. MX Motocross

    Instalación de la biblioteca MDX

    MDX es un formato que nos permite escribir JSX e importar componentes sin problemas en nuestros archivos Markdown. Nos permite escribir Markdown regular y también incrustar componentes de React en nuestros archivos.

     

    Para habilitar MDX en la aplicación, necesitamos instalar la @mdx-js/loaderbiblioteca. Para hacerlo, primero naveguemos hasta la raíz del proyecto y luego ejecutemos este comando en la CLI:

    yarn add @mdx-js/loader

    O, si estás usando npm:

    npm install @mdx-js/loader

    A continuación, instale @next/mdx, que es una biblioteca específica de Next.js. Ejecute este comando en la CLI:

    yarn add @next/mdx

    O, para npm:

    npm install @next/mdx

    ¡Excelente! Hemos terminado de configurar. Ensuciémonos las manos y codifiquemos algo significativo.

    Configurando el next.config.jsarchivo

    const withMDX = require("@next/mdx")({ extension: /.mdx?$/});module.exports = withMDX({ pageExtensions: ["js", "jsx", "md", "mdx"]});

    Anteriormente en este tutorial, dije que Next.js pagestrataría los archivos debajo de la carpeta como páginas/rutas en el momento de la compilación. De forma predeterminada, Next.js simplemente seleccionará archivos con extensiones .jso . .jsxEs por eso que necesitamos un archivo de configuración para agregar algunas personalizaciones al comportamiento predeterminado de Next.js.

    El next.config.jsarchivo le dice al marco que los archivos con extensiones .mdo .mdxtambién deben tratarse como páginas/rutas en el momento de la compilación porque la blogcarpeta que contiene los artículos se encuentra en el pagesdirectorio.

    Dicho esto, podemos empezar a buscar las publicaciones del blog en la siguiente parte.

    Obteniendo publicaciones de blog

    Una de las razones por las que crear un blog con Next.js es fácil y sencillo es que no necesita GraphQL o similares para buscar publicaciones locales. Puede utilizar JavaScript normal para obtener los datos.

    En getAllPosts.js:

    function importAll(r) { return r.keys().map((fileName) = ({ link: fileName.substr(1).replace(//index.mdx$/, ""), module: r(fileName) }));}export const posts = importAll( require.context("./pages/blog/", true, /.mdx$/));

    Este archivo puede resultar intimidante al principio. Es una función que importa todos los archivos MDX de la carpeta pages/blog, y para cada publicación devuelve un objeto con la ruta del archivo, sin la extensión ( /post-1), y los datos de la publicación del blog.

    Una vez implementado esto, ahora podemos crear los componentes para diseñar y mostrar datos en nuestra aplicación Next.js.

    Construyendo los componentes

    En components/Layout.js:

    import Head from "next/head";import Header from "./Header";export default function Layout({ children, pageTitle, description }) { return ( Head meta name="viewport" content="width=device-width, initial-scale=1" / meta charSet="utf-8" / meta name="Description" content={description}/meta title{pageTitle}/title /Head main Header / div className="content"{children}/div /main / );}

    Aquí tenemos el Layoutcomponente que usaremos como contenedor para el blog. Recibe los metadatos para mostrar en el encabezado de la página y el componente que se mostrará.

     

    En components/Post.js:

    import Link from 'next/link'import { HeadPost } from './HeadPost'export const Post = ({ post }) = { const { link, module: { meta }, } = post return ( article HeadPost meta={meta} / Link href={'/blog' + link} aRead more →/a /Link /article )}

    Este componente es responsable de mostrar una vista previa de una publicación de blog. Recibe el postobjeto para mostrar como atrezo. A continuación, utilizamos la desestructuración para extraer el contenido linkde la publicación y metamostrarlo del objeto. Con eso, ahora podemos pasar los datos a los componentes y manejar el enrutamiento con el Linkcomponente.

    En components/BlogPost.js:

    import { HeadPost } from './HeadPost'export default function BlogPost({ children, meta}) { return ( HeadPost meta={meta} isBlogPost / article{children}/article / )}

    El BlogPostcomponente nos ayuda a renderizar un solo artículo. Recibe el correo a mostrar y su metaobjeto.

    Hasta ahora hemos cubierto mucho, pero no tenemos artículos que mostrar. Arreglemos eso en la siguiente sección.

    Escribir publicaciones con MDX

    import BlogPost from '../../../components/BlogPost'export const meta = { title: 'Introduction to Next.js', description: 'Getting started with the Next framework', date: 'Aug 04, 2020', readTime: 2}export default ({ children }) = BlogPost meta={meta}{children}/BlogPost;## My HeadlineLorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque maximus pellentesque dolor non egestas. In sed tristique elit. Cras vehicula, nisl vel ultricies gravida, augue nibh laoreet arcu, et tincidunt augue dui non elit. Vestibulum semper posuere magna, quis molestie mauris faucibus ut.

    Como puede ver, importamos el BlogPostcomponente que recibe el metacuerpo de la publicación.

    El parámetro childrenes el cuerpo de la publicación del blog o, para ser precisos, todo lo que viene después del metaobjeto. Es la función encargada de rendir el cargo.

    Con ese cambio, podemos pasar al index.jsarchivo y mostrar las publicaciones en la página de inicio.

    Mostrando publicaciones

    import { Post } from "../components/Post";import { posts } from "../getAllPosts";export default function IndexPage() { return ( {posts.map((post) = ( Post key={post.link} post={post} / ))} / );}

    Aquí, comenzamos importando el Postcomponente y las publicaciones obtenidas de la blogcarpeta. A continuación, recorremos la serie de artículos y, para cada publicación, usamos el Postcomponente para mostrarla. Una vez hecho esto, ahora podemos buscar las publicaciones y mostrarlas en la página.

    Casi terminamos. Sin embargo, el Layoutcomponente todavía no se utiliza. Podemos usarlo aquí y envolver nuestros componentes con él. Pero eso no afectará las páginas de artículos. Ahí es donde _app.jsentra en juego el archivo. Usemos eso en la siguiente sección.

    Usando el _app.jsarchivo

    Aquí, el símbolo de subrayado ( _) es realmente importante. Si lo omite, Next.js tratará el archivo como una página/ruta.

    import Layout from "../components/Layout";export default function App({ Component, pageProps }) { return ( Layout pageTitle="Blog" description="My Personal Blog" Component {...pageProps} / /Layout );}

    Next.js usa el Appcomponente para inicializar páginas. El propósito de este archivo es anularlo y agregar algunos estilos globales al proyecto. Si tiene estilos o datos que deben compartirse en todo el proyecto, colóquelos aquí.

    Ahora podemos explorar la carpeta del proyecto en la CLI y ejecutar el siguiente comando para obtener una vista previa del blog en el navegador:

    yarn dev

    O, en npm:

    npm run dev

    Si abres https://localhost:3000en el navegador, podrás ver esto:

    ¡Excelente! Nuestro blog tiene buena pinta. Hemos terminado de crear la aplicación de blog con Next.js y MDX.

    Conclusión

    En este tutorial, analizamos Next.js creando un blog utilizando la biblioteca MDX. El marco Next.js es una herramienta útil que hace que las aplicaciones React sean rápidas y compatibles con SEO. Se puede utilizar para crear sitios web JAMstack estáticos y dinámicos en poco tiempo, porque está listo para producción y viene con algunas características interesantes. Next.js es ampliamente utilizado por grandes empresas y su rendimiento sigue mejorando. Definitivamente es algo que debes revisar para tu próximo proyecto.

    Puede obtener una vista previa del proyecto terminado en CodeSandbox .

    ¡Gracias por leer!

    Recursos

    Estos útiles recursos lo llevarán más allá del alcance de este tutorial.

    • Documentación de Next.js
    • Documentación de Next.js y MDX
    • " Crear una aplicación Next.js ", Next.js

    (ks, ra, al, il)Explora más en

    • Reaccionar
    • javascript
    • Siguiente.js
    • MDX





    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    Cómo crear un blog con Next y MDX

    Cómo crear un blog con Next y MDX

    Implemente rápidamente. Implementar inteligentemente Creación y mantenimiento de sistemas de diseño exitosos, con Brad Fost Índice

    programar

    es

    https://pseint.es/static/images/programar-como-crear-un-blog-con-next-y-mdx-1058-0.jpg

    2024-04-04

     

    Cómo crear un blog con Next y MDX
    Cómo crear un blog con Next y MDX

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20