Las herramientas de código bajo como WordPress simplifican el proceso de creación de blogs. Puede usar un tema prefabricado y comenzar a escribir publicaciones de blog en cuestión de horas. Si desea más control sobre su código y tiene algo de tiempo libre, es mejor crear su blog desde cero. Incluso puede usar un marco como Next.js para simplificar el proceso.
Aprenda a crear un blog Next.js simple que represente publicaciones de descuento.
Creación de un proyecto Next.js
Next.js es un marco React que simplifica la forma en que crea aplicaciones. Proporciona muchas herramientas y configuraciones listas para usar, lo que le permite comenzar a escribir código inmediatamente después de instalarlo.
La forma más sencilla de comenzar con Next.js es ejecutando el comando create-next-app en una terminal:
npx crear-próximo-app markdown-blog
Este comando crea un proyecto Next.js que contiene todos los archivos necesarios para comenzar.
Lo primero es lo primero, limpiar el índice.js archivo para que se vea así:
importar Cabeza de 'siguiente/cabeza'
importar estilos de '../styles/Home.módulo.css'
exportarpor defectofunciónHogar() {
devolver (
<div className={estilos.contenedor}>
<Cabeza>
<título>Crear la siguiente aplicación</title>
<metanombre="descripción" contenido="Generado por crear la siguiente aplicación" />
<enlace rel="icono" href="/favicon.ico" />
</Head>
</div>
)
}
Crear publicaciones de blog Markdown
El blog se renderizará archivos de rebajas almacenado localmente en la carpeta del proyecto. Por lo tanto, cree una nueva carpeta en la raíz llamada contenido para almacenar los archivos. En esta carpeta, cree un nuevo archivo llamado crear-enlace-activo-nextjs.md y agrega lo siguiente:
título: Cómo crear un activo enlaceen siguientejs
descripción: Personalización de enlaces activos usando useRouter()
Esta publicado: verdadero
Fecha de publicación: 2022/07/22
etiquetas:
- próximo
## Contenido principal
El nombre del archivo de descuento será parte de la URL de la publicación, así que asegúrese de que sea bueno. Además, tenga en cuenta el contenido entre los guiones. Estos son los metadatos de la publicación y se denominan asuntos preliminares.
Análisis de archivos Markdown
Para cada publicación de blog, debe analizar el contenido de rebajas y el tema principal. Para Markdown, use react-markdown y para los datos de materia prima, use materia gris.
React-markdown es un componente de React basado en comentarios que convierte de forma segura Markdown en HTML. La biblioteca de materia gris analiza la materia frontal y convierte YAML en un objeto.
Ejecute el siguiente comando en la terminal para instalar react-markdown y gray-matter.
npm instalar reaccionar-markdown-materia gris
En una nueva carpeta llamada utils, cree un nuevo archivo llamado md.js. Creará funciones auxiliares que devolverán contenido de publicaciones de blog en este archivo.
Obtener todas las publicaciones publicadas
En md.js, agregue el siguiente código para devolver todas las publicaciones en la carpeta de contenido.
importar fs de "fs";
importar camino de "camino";
importar asunto de "materia gris";exportarconstante getPath = (carpeta: cadena) => {
devolver ruta.unirse (proceso.cwd(), `/${carpeta}`); // Obtener la ruta completa
}exportarconstante getFileContent = (nombre de archivo: cadena, carpeta:cadena) => {
constante POSTS_PATH = getPath (carpeta)
devuelve fs.readFileSync (path.join (POSTS_PATH, nombre de archivo), "utf8");
};exportarconstante getAllPosts = (carpeta: cadena) => {
constante POSTS_PATH = getPath (carpeta)
devolver fs
.readdirSync (POSTS_PATH) // obtener archivos en el directorio
.filter((ruta) => /\\.md?$/.prueba (ruta)) // solo archivos .md
.map((nombre de archivo) => { // mapa sobre cada archivo
constante fuente = getFileContent (nombre de archivo, carpeta); // recuperar el contenido del archivo
constante slug = nombreArchivo.reemplazar(/\\.md?$/, ""); // obtener el slug del nombre del archivo
constante {datos} = materia (fuente); // extrae la materia frontal
devolver {
frontmatter: datos,
babosa: babosa,
};
});
};
En la función getAllPosts():
- Obtenga la ruta completa a la carpeta de contenido usando el módulo de ruta.
- Obtenga los archivos en la carpeta de contenido usando el método fs.readdirSync().
- Filtre los archivos para incluir solo archivos con la extensión .md.
- Recupere el contenido de cada archivo, incluido el material preliminar, utilizando el método del mapa.
- Devuelve una matriz que contiene el material preliminar y el slug (el nombre del archivo sin la extensión .md) de cada archivo.
Para obtener solo las publicaciones publicadas, puede filtrar todas las publicaciones y devolver solo aquellas cuya clave isPublished en el asunto principal esté configurada como verdadera.
exportarconstante getAllPublished = (carpeta: cadena) => {
constante publicaciones = getAllPosts (carpeta)constante publicado = publicaciones.filtro((publicación) => {
devolver post.frontmatter.isPublished verdadero
})
devolver publicado
}
En md.js, agregue la función getSinglePost() para recuperar el contenido de una sola publicación.
exportarconstante getSinglePost = (slug: cadena, carpeta:cadena) => {
constante fuente = getFileContent(`${babosa}.md`, carpeta);
constante { datos: materia prima, contenido } = materia (fuente);
devolver {
materia frontal,
contenido,
};
};
Esta función llama a la función getFileContent() para obtener el contenido de cada archivo. Luego, usando el paquete de materia gris, la función recupera la materia prima y el contenido de rebajas.
Mostrar todas las publicaciones del blog
Next.js proporciona diferentes opciones de renderizado, una de ellas es la generación estática. La generación estática es un tipo de representación previa donde Next.js genera todas las páginas HTML durante el tiempo de compilación. Lo usas para crear páginas estáticas rápidas.
Revisar la documentación oficial de Nextjs para obtener más información sobre el renderizado.
Next.js renderizará previamente una página en el momento de la compilación utilizando los accesorios devueltos por la función getStaticProps. En este caso, los accesorios serán una serie de publicaciones publicadas.
exportarconstante getStaticProps = asíncrono () => {
const publicaciones = getAllPublished("publicaciones");
devolver {
accesorios: { publicaciones },
};
};
Modifique el archivo index.js para mostrar una lista de publicaciones de blog.
importar Cabeza de "siguiente/cabeza";
importar Enlace de "siguiente/enlace";
importar { obtenerTodoPublicado } de "../utils/md";funciónHogar({ publicaciones }) {
devolver (
<div className={estilos.contenedor}>
<Cabeza>
<título>Crear la siguiente aplicación</title>
<metanombre="descripción" contenido="Generado por crear la siguiente aplicación" />
<enlace rel="icono" href="/favicon.ico" />
</Head>
<división>
{publicaciones.mapa((publicación) => (
<clave del artículo={post.slug}>
<pag>[ {post.frontmatter.tags.join(", ")} ]</pag>
`publicaciones/${publicación.slug}`}>
<a>{post.frontmatter.título}</a>
</Link>{""}
<pag>{post.frontmatter.descripción}</pag>
</article>
))}
</div>
</div>
);
}exportarconstante getStaticProps = asíncrono () => {
const publicaciones = getAllPublished("contenido");devolver {
accesorios: { publicaciones },
};
};
exportarpor defecto Hogar;
El componente Inicio utiliza las publicaciones devueltas por getStaticProps. Itera sobre ellos usando la función de mapa, y para cada publicación, muestra un título, un enlace a la publicación completa y una descripción.
Mostrar una publicación de blog
Como se mencionó, los nombres de archivo de las publicaciones se utilizarán como rutas de URL. Estas rutas también son dinámicas, por lo que debe generarlas durante el tiempo de compilación. Next.js le permite hacer esto usando la función getStaticPaths().
Por ejemplo, en este código, las rutas se generan a partir de los nombres de los archivos de rebajas.
exportarconstante getStaticPaths = asíncrono () => {
const rutas = getAllPublished("publicaciones").mapa(({slug}) => ({parámetros: {slug}}));
devolver {
caminos,
retroceder: FALSO,
};
};
Tenga en cuenta que está utilizando los datos de publicaciones devueltos por la función auxiliar getAllPublished() que creó anteriormente.
También está configurando el respaldo en falso, lo que devuelve un error 404 por caminos que no existen.
getStaticPaths() generalmente se usa con getStaticProps() que recupera el contenido de cada publicación en función de los parámetros.
exportarconstante getStaticProps = asíncrono ({parámetros}) => {
constante publicar = esperar getSinglePost (params.slug, "publicaciones");
devolver {
accesorios: {... publicar },
};
};
Para representar el markdown en HTML, use react-markdown.
importar ReaccionarMarkdown de 'react-markdown'
importar { getAllPosts, getSinglePost } de "../../utils/md";
constante Publicar = ({ contenido, tema principal }) => {
devolver (
<división>
<pag>{frontmatter.tags.join(', ')}</pag>
<h2>{frontmatter.título}</h2>
<durar>{frontmatter.publishedDate}</span>
<ReaccionarMarkdown>{contenido}</ReactMarkdown>
</div>
);
};
Este componente mostrará el contenido de cada publicación de blog y su URL correspondiente.
Si crea un blog de desarrollador, puede añadir resaltado de sintaxis capacidad de cada componente.
Estilo del blog Markdown de Next.js
Hasta ahora, ha creado un blog de Markdown de Next.js que muestra una lista de publicaciones de blog y representa el contenido de esa publicación. Para que el blog se vea mejor, debe agregar estilos CSS.
Next.js tiene una buena compatibilidad con CSS y puede elegir usar bibliotecas CSS-in-JS como componentes con estilo. Si prefiere separar CSS de JS, puede usar módulos CSS.
