Como instalar de Bloques de Código en Next.js y Sanity
La integración de plugins en tus proyectos es esencial para mejorar la funcionalidad y la experiencia de desarrollo. En este artículo, exploraremos cómo instalar y configurar el plugin @sanity/code-input para la plataforma Sanity y cómo integrarlo eficientemente en tu aplicación Next.js. Asegúrate de seguir cada paso para aprovechar al máximo esta herramienta y mejorar la gestión de bloques de código en tus proyectos.
Paso 1: Instalación del Plugin @sanity/code-input en Sanity
Primero, instala el plugin @sanity/code-input en tu proyecto. Abre tu terminal y ejecuta el siguiente comando:
1
npm i @sanity/code-inputPaso 2: Importar el plugin y añadirlo en nuestra lista de plugins
En el archivo sanity.config.js
Importamos el plugin y lo añadimos dentro del array plugins
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//IMPORTAR
import { codeInput } from "@sanity/code-input";
export default defineConfig({
basePath: "/",
projectId: projectId || "",
dataset: dataset || "",
title,
schema: {
// If you want more content types, you can add them to this array
types: [author, post],
},
document: {
productionUrl: resolveProductionUrl,
},
plugins: [
deskTool({}),
unsplashImageAsset(),
visionTool(),
//AÑADIR CON LOS OTROS PLUGINS
codeInput(),
],
});También tenemos que añadirlo en nuestro post.js (dentro del proyecto Sanity)dentro de el array fields
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
export const post = {
name: "post",
title: "Post",
type: "document",
fields: [
{
name: "title",
title: "Title",
type: "string",
validation: (Rule) => Rule.required(),
},
{
name: "slug",
title: "Slug",
type: "slug",
options: {
source: "title",
maxLength: 96,
},
validation: (Rule) => Rule.required(),
},
//AÑADIR OBJETO CON TIPO CODE
{
name: "content",
title: "Content",
type: "array",
of: [
{ type: "block" },
{
type: "code",
title: "Code Block",
},
{
type: "image",
options: { hotspot: true },
},
],
},
{
name: "excerpt",
title: "Excerpt",
type: "string",
},
{
name: "coverImage",
title: "Cover Image",
type: "image",
options: {
hotspot: true,
},
},
{
name: "date",
title: "Date",
type: "datetime",
},
{
name: "author",
title: "Author",
type: "reference",
to: [{ type: "author" }],
},
{
name: "resumen",
title: "Resumen",
type: "text",
},
],
preview: {
select: {
title: "title",
author: "author.name",
media: "coverImage",
},
prepare(selection) {
const { author } = selection;
return { ...selection, subtitle: author && `by ${author}` };
},
},
};
Con esto ya tendríamos en la parte de sanity y tendríamos que ver "Code Block"
![[object Object]](https://cdn.sanity.io/images/i0aep0oz/production/cb4297d28c9703b6b6a24b606d76693619da332f-902x95.png?fit=max&auto=format)
Paso 3: Integración en el Frontend con Next.js
3.1: Instalación de Dependencias
Ejecuta el siguiente comando en tu terminal para instalar las dependencias necesarias:
npm install react-code-blocks
npm install @portabletext/react
import{ PortableText }from"@portabletext/react";
3.2: Importación de Componentes
Importa los componentes necesarios en tu archivo donde planeas mostrar los bloques de código:
En este caso en el posts.js de nuestro proyecto de next.js
1
2
import { CopyBlock, dracula } from 'react-code-blocks';
import { PortableText } from "@portabletext/react";Nuestro post.js recibe un array de objetos donde cada objeto es de un tipo y según el tipo el front deberá renderizar un bloque diferente, en este caso de tipo "code".
Con esto indicamos de que cuando el type es code se renderizara el componente <CopyBlock> con su value recibido desde Sanity
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const myPortableTextComponents = {
types: {
code: ({ value }) => (
<div className="centrar-bloque-post code-block">
<CopyBlock
text={value.code}
language={value.language}
showLineNumbers={true}
wrapLines={true}
theme={dracula}
codeBlock
/>
</div>
),
},
};Esto se lo enviamos a el componente que hemos importado anteriormente que se encargara de ir renderizando según nuestros tipos
1
2
3
4
<PortableText
value={post.content}
components={myPortableTextComponents}
/>
