Construye una App Fullstack

2024-01-18T00:00:00+00:00

En este tutorial, desarrollaremos una app fullstack con el siguiente tech stack:</p>

Next.js</a> como meta-framework</li>
TailwindCSS</a> para estilos</li>
shadcn/ui</a> para componentes UI</li>
Prisma</a> como ORM</li>
PostgreSQL</a> como base de datos</li>
Auth.js</a> para autenticación</li>

Docker</a> para crear una instancia de una base de datos PostgreSQL localmente</li> </ul>

Aprenderemos algunos de los fundamentos de este tech stack, como usar server components</strong> en Next.js, o crear endpoints API</strong> usando el app router</strong>.</p>

2. Configuración inicial</h2>
Comencemos creando un nuevo proyecto Next.js, en tu terminal</code> ejecuta:</p>

npx create-next-app@latest</span></span></code></pre>
Asegúrate de marcar Yes</code> en las siguientes opciones:</p>

Would you like to use TypeScript</strong>?</li>
Would you like to use ESLint</strong>?</li>
Would you like to use Tailwind CSS</strong>?</li>
Would you like to use ‘src/’ directory</strong>?</li>
Would you like to use App Router</strong>? (recommended)</li>
</ul>
> What is your project named? fullstack-app</span></span>
> Would you like to use TypeScript? No / Yes</span></span>
> Would you like to use ESLint? No / Yes</span></span>
> Would you like to use Tailwind CSS? No / Yes</span></span>
> Would you like to use `src/` directory? No / Yes</span></span>
> Would you like to use App Router? (recommended) No / Yes</span></span>
> Would you like to customize the default import alias (@/*)? No / Yes</span></span>
> What import alias would you like configured? @/*</span></span></code></pre>
Espera a que la instalación de las dependencias termine, luego accede a la carpeta del proyecto:</p>
cd fullstack-app</span></span></code></pre>
Abre tu editor de código de preferencia.</p>
2.1 Instalar shadcn/ui</h3>
Estos componentes nos ayudarán mucho a construir la UI</strong> junto con TailwindCSS.</p>
Primero, inicializa shadcn/ui:</p>
npx shadcn-ui@latest init</span></span></code></pre>
Asegúrate de configurar shadcn/ui de acuerdo a tu proyecto.</p>
Puedes revisar la documentación de shadcn/ui</a> para cada componente que puedas necesitar, cada componente se instala individualmente.</p>
2.2 Crear una base de datos PostgreSQL usando Docker</h3>
Asegúrate de tener Docker</a> instalado en tu máquina.</p>
Primero, necesitas descargar una imagen de PostgreSQL de Docker Hub:</p>
docker pull postgres</span></span></code></pre>
Luego, crea un contenedor con la imagen:</p>
docker run --name my-postgres -e POSTGRES_PASSWORD=password -p 5432:5432 -d postgres</span></span></code></pre>2.3 Instalar Prisma</h3>
Instala Prisma usando tu gestor de dependencias, en este caso npm</strong>:</p>
npm install prisma -D</span></span></code></pre>
Ahora inicializa Prisma:</p>
npx prisma init</span></span></code></pre>
Se creará un directorio ./prisma</code> en la raíz de tu proyecto, con un archivo schema.prisma</code>.</p>
Aquí crearás tus schemas.</p>
Agrega este modelo como ejemplo:</p>
model User {</span></span>
  id        Int      @id @default(autoincrement())</span></span>
  createdAt DateTime @default(now())</span></span>
  email     String   @unique</span></span>
  name      String?</span></span>
}</span></span></code></pre>
Actualiza tu archivo .env con la siguiente URL:</p>
DATABASE_URL="postgresql://postgres:password@localhost:5432/postgres?schema=public"</span></span></code></pre>
En esta URL está tu nombre de usuario (por defecto es postgres), tu contraseña (en este caso password), el host (por defecto es localhost), el puerto (por defecto es 5432), el nombre de la base de datos (por defecto es postgres) y el schema (por defecto es public).</p>
Crea tu primera migración para probar si Prisma puede conectarse a tu base de datos local:</p>
npx prisma migrate dev --name init</span></span></code></pre>
Si todo está bien, verás un nuevo directorio /migrations</code> con un nuevo archivo dentro.</p>

Si tienes un error, asegúrate de poder conectarte a tu base de datos local. Elimina y crea el contenedor de nuevo si es necesario.</p>
</blockquote>
2.4 Configurar Auth.js</h3>
Agrega este modelo a tu schema.prisma</code>:</p>
model Account {</span></span>
  id                String  @id @default(cuid())</span></span>
  userId            String</span></span>
  type              String</span></span>
  provider          String</span></span>
  providerAccountId String</span></span>
  refresh_token     String? @db.Text</span></span>
  access_token      String? @db.Text</span></span>
  expires_at        Int?</span></span>
  token_type        String?</span></span>
  scope             String?</span></span>
  id_token          String? @db.Text</span></span>
  session_state     String?</span></span>
</span>
  user User @relation(fields: [userId], references: [id], onDelete: Cascade)</span></span>
</span>
  @@unique([provider, providerAccountId])</span></span>
}</span></span>
</span>
model Session {</span></span>
  id           String   @id @default(cuid())</span></span>
  sessionToken String   @unique</span></span>
  userId       String</span></span>
  expires      DateTime</span></span>
  user         User     @relation(fields: [userId], references: [id], onDelete: Cascade)</span></span>
}</span></span>
</span>
model User {</span></span>
  id            String    @id @default(cuid())</span></span>
  name          String?</span></span>
  email         String?   @unique</span></span>
  emailVerified DateTime?</span></span>
  image         String?</span></span>
  accounts      Account[]</span></span>
  sessions      Session[]</span></span>
}</span></span>
</span>
model VerificationToken {</span></span>
  identifier String</span></span>
  token      String   @unique</span></span>
  expires    DateTime</span></span>
</span>
  @@unique([identifier, token])</span></span>
}</span></span></code></pre>
Estos modelos son para Auth.js</strong>, ahora podemos instalarlo con el adaptador de Prisma:</p>
npm install @prisma/client @auth/prisma-adapter</span></span></code></pre>
Instalaremos nodemailer también, ya que usaremos magic links para la autenticación:</p>
npm install nodemailer -D</span></span></code></pre>
Ahora crea src/utils/db.ts</code> e inicializa prisma</strong>:</p>
import { PrismaClient } from "@prisma/client";</span></span>
</span>
const prismaClientSingleton = () => {</span></span>
  return new PrismaClient();</span></span>
};</span></span>
</span>
declare global {</span></span>
  var prisma: undefined | ReturnType<typeof prismaClientSingleton>;</span></span>
}</span></span>
</span>
const prisma = globalThis.prisma ?? prismaClientSingleton();</span></span>
</span>
export default prisma;</span></span>
</span>
if (process.env.NODE_ENV !== "production") globalThis.prisma = prisma;</span></span></code></pre>
Luego, crea src/libs/auth.ts</code> para configurar Auth.js:</p>
import type { NextAuthOptions } from "next-auth";</span></span>
import { PrismaAdapter } from "@auth/prisma-adapter";</span></span>
import EmailProvider from "next-auth/providers/email";</span></span>
import prisma from "@/libs/db";</span></span>
import { Adapter } from "next-auth/adapters";</span></span>
</span>
export const authOptions = {</span></span>
  adapter: PrismaAdapter(prisma) as Adapter,</span></span>
  providers: [</span></span>
    EmailProvider({</span></span>
      server: {</span></span>
        host: process.env.EMAIL_SERVER_HOST,</span></span>
        port: process.env.EMAIL_SERVER_PORT,</span></span>
        auth: {</span></span>
          user: process.env.EMAIL_SERVER_USER,</span></span>
          pass: process.env.EMAIL_SERVER_PASSWORD,</span></span>
        },</span></span>
      },</span></span>
      from: process.env.EMAIL_FROM,</span></span>
    }),</span></span>
  ],</span></span>
  callbacks: {</span></span>
    session: async ({ session, user }) => {</span></span>
      return {</span></span>
        ...session,</span></span>
        user: user,</span></span>
      };</span></span>
    },</span></span>
  },</span></span>
} satisfies NextAuthOptions;</span></span></code></pre>
Esta configuración es para usar un proveedor de email, para este proyecto usaremos Resend</a>.</p>
Crea una cuenta y luego obtén las siguientes credenciales en tu archivo .env:</p>

EMAIL_SERVER_HOST: smtp.resend.com</li>
EMAIL_SERVER_PORT: 465</li>
EMAIL_SERVER_USER: resend</li>
EMAIL_FROM: onboarding@resend(dot)dev</li>
EMAIL_SERVER_PASSWORD: yor api key</li>
</ul>
Ahora, crea un archivo src/pages/api/auth/[...nextauth].ts</code>:</p>
import { authOptions } from "@/libs/auth";</span></span>
import NextAuth from "next-auth/next";</span></span>
</span>
const handler = NextAuth(authOptions);</span></span>
</span>
export { handler as GET, handler as POST };</span></span></code></pre>
Este archivo es para manejar la autenticación en nuestra app.</p>
Ahora puedes autenticar usuarios con un magic link enviado por email.</p>
Crea un archivo src/app/auth/signin-form.tsx</code>:</p>
"use client";</span></span>
</span>
import { useState } from "react";</span></span>
import { signIn } from "next-auth/react";</span></span>
</span>
export default function SigninForm() {</span></span>
  const [email, setEmail] = useState<null | string>(null);</span></span>
</span>
  async function handleSubmit() {</span></span>
    await signIn("email", {</span></span>
      email,</span></span>
      callbackUrl: `${window.location.origin}`,</span></span>
    });</span></span>
  }</span></span>
</span>
  return (</span></span>
    <form className="mt-5 space-y-4" action={handleSubmit}></span></span>
      <section className="flex flex-col gap-2"></span></span>
        <label htmlFor="email">Email</label></span></span>
        <input</span></span>
          id="email"</span></span>
          type="email"</span></span>
          name="email"</span></span>
          onChange={(e) => setEmail(e.target.value)}</span></span>
          className="w-max p-1 border border-slate-400"</span></span>
        /></span></span>
      </section></span></span>
      <button type="submit">Sign in</button></span></span>
    </form></span></span>
  );</span></span>
}</span></span></code></pre>
Impórtalo en src/app/auth/page.tsx</code>:</p>
Import it to your src/app/auth/page.tsx</code> file:</p>
import { authOptions } from "@/libs/auth";</span></span>
import { getServerSession } from "next-auth";</span></span>
import { redirect } from "next/navigation";</span></span>
import SigninForm from "./form";</span></span>
</span>
export default async function Signin() {</span></span>
  const session = await getServerSession(authOptions);</span></span>
</span>
  if (session) {</span></span>
    return redirect("/");</span></span>
  }</span></span>
</span>
  return (</span></span>
    <></span></span>
      <h1>Sign in</h1></span></span>
</span>
      <SigninForm /></span></span>
    </></span></span>
  );</span></span>
}</span></span></code></pre>
Como puedes ver, puedes redirigir a los usuarios si no están autenticados obteniendo la sesión con getServerSession</strong>.</p>
3. Mejora tu UI</h2>
Creemos una app para posts cortos.</p>
Primero, agrega algunos componentes de shadcn/ui y actualiza tus componentes, también crearemos nuevos componentes:</p>
npx shadcn-ui@latest add button</span></span></code></pre>npx shadcn-ui@latest add dialog</span></span></code></pre>npx shadcn-ui@latest add input</span></span></code></pre>npx shadcn-ui@latest add textarea</span></span></code></pre>npx shadcn-ui@latest add form</span></span></code></pre>npx shadcn-ui@latest add label</span></span></code></pre>npx shadcn-ui@latest add sonner</span></span></code></pre>
Agregaremos las URL de los endpoints para estos componentes, pero más adelante.</p>
src/app/auth/signin-form.tsx</code></p>
Aquí actualizaremos la UI y agregaremos validación de formulario.</p>
"use client";</span></span>
</span>
import { signIn } from "next-auth/react";</span></span>
import { Button } from "@/components/ui/button";</span></span>
import {</span></span>
  Form,</span></span>
  FormControl,</span></span>
  FormField,</span></span>
  FormItem,</span></span>
  FormLabel,</span></span>
  FormMessage,</span></span>
} from "@/components/ui/form";</span></span>
import { Input } from "@/components/ui/input";</span></span>
import { Textarea } from "@/components/ui/textarea";</span></span>
import { useForm } from "react-hook-form";</span></span>
import * as z from "zod";</span></span>
import { zodResolver } from "@hookform/resolvers/zod";</span></span>
</span>
const formSchema = z.object({</span></span>
  email: z.string().email(),</span></span>
});</span></span>
</span>
export default function SigninForm() {</span></span>
  const form = useForm<z.infer<typeof formSchema>>({</span></span>
    resolver: zodResolver(formSchema),</span></span>
    defaultValues: {</span></span>
      email: "",</span></span>
    },</span></span>
  });</span></span>
</span>
  async function onSubmit({ email }: z.infer<typeof formSchema>) {</span></span>
    await signIn("email", {</span></span>
      email,</span></span>
      callbackUrl: `${window.location.origin}`,</span></span>
    });</span></span>
  }</span></span>
</span>
  return (</span></span>
    <Form {...form}></span></span>
      <form className="space-y-4" onSubmit={form.handleSubmit(onSubmit)}></span></span>
        <FormField</span></span>
          control={form.control}</span></span>
          name="email"</span></span>
          render={({ field }) => (</span></span>
            <FormItem></span></span>
              <FormLabel>Email</FormLabel></span></span>
              <FormControl></span></span>
                <Input placeholder="address@example.com" {...field} /></span></span>
              </FormControl></span></span>
              <FormMessage /></span></span>
            </FormItem></span></span>
          )}</span></span>
        /></span></span>
        <Button className="w-full" type="submit"></span></span>
          Send magic link</span></span>
        </Button></span></span>
      </form></span></span>
    </Form></span></span>
  );</span></span>
}</span></span></code></pre>
src/components/post/create.tsx</code></p>
Actualiza los componentes de UI y agrega validación de formulario.</p>
"use client";</span></span>
</span>
import { useState } from "react";</span></span>
import {</span></span>
  Dialog,</span></span>
  DialogContent,</span></span>
  DialogDescription,</span></span>
  DialogHeader,</span></span>
  DialogTitle,</span></span>
  DialogTrigger,</span></span>
} from "@/components/ui/dialog";</span></span>
import { Button } from "@/components/ui/button";</span></span>
import {</span></span>
  Form,</span></span>
  FormControl,</span></span>
  FormField,</span></span>
  FormItem,</span></span>
  FormLabel,</span></span>
  FormMessage,</span></span>
} from "@/components/ui/form";</span></span>
import { Input } from "@/components/ui/input";</span></span>
import { Textarea } from "@/components/ui/textarea";</span></span>
import { useForm } from "react-hook-form";</span></span>
import * as z from "zod";</span></span>
import { zodResolver } from "@hookform/resolvers/zod";</span></span>
import { useRouter } from "next/navigation";</span></span>
import { toast } from "sonner";</span></span>
import { SessionProps } from "./types";</span></span>
</span>
const formSchema = z.object({</span></span>
  title: z.string().min(1).max(100),</span></span>
  content: z.string().min(1),</span></span>
});</span></span>
</span>
export default function CreatePost(props: SessionProps) {</span></span>
  const [open, setOpen] = useState(false);</span></span>
  const router = useRouter();</span></span>
  const form = useForm<z.infer<typeof formSchema>>({</span></span>
    resolver: zodResolver(formSchema),</span></span>
    defaultValues: {</span></span>
      title: "",</span></span>
      content: "",</span></span>
    },</span></span>
  });</span></span>
</span>
  async function onSubmit(values: z.infer<typeof formSchema>) {</span></span>
    try {</span></span>
      const res = await fetch("/api/posts", {</span></span>
        method: "POST",</span></span>
        headers: { "Content-Type": "application/json" },</span></span>
        body: JSON.stringify({</span></span>
          ...values,</span></span>
          authorId: props.session.user?.id,</span></span>
        }),</span></span>
      });</span></span>
      const json = await res.json();</span></span>
</span>
      if (!res.ok) {</span></span>
        toast(json.message);</span></span>
</span>
        return;</span></span>
      }</span></span>
</span>
      toast("Post created!");</span></span>
      form.reset();</span></span>
      setOpen(false);</span></span>
      router.refresh();</span></span>
    } catch (error) {</span></span>
      console.error(error);</span></span>
    }</span></span>
  }</span></span>
</span>
  return (</span></span>
    <Dialog open={open} onOpenChange={setOpen}></span></span>
      <DialogTrigger asChild></span></span>
        <Button>Create post</Button></span></span>
      </DialogTrigger></span></span>
      <DialogContent className="max-w-[300px]"></span></span>
        <DialogHeader className="text-left"></span></span>
          <DialogTitle>Create post</DialogTitle></span></span>
          <DialogDescription></span></span>
            Please <strong>do not</strong> post <strong>NSFW</strong> content.</span></span>
          </DialogDescription></span></span>
        </DialogHeader></span></span>
        <Form {...form}></span></span>
          <form className="space-y-4" onSubmit={form.handleSubmit(onSubmit)}></span></span>
            <FormField</span></span>
              control={form.control}</span></span>
              name="title"</span></span>
              render={({ field }) => (</span></span>
                <FormItem></span></span>
                  <FormLabel>Title</FormLabel></span></span>
                  <FormControl></span></span>
                    <Input placeholder="Hi there!" {...field} /></span></span>
                  </FormControl></span></span>
                  <FormMessage /></span></span>
                </FormItem></span></span>
              )}</span></span>
            /></span></span>
            <FormField</span></span>
              control={form.control}</span></span>
              name="content"</span></span>
              render={({ field }) => (</span></span>
                <FormItem></span></span>
                  <FormLabel>Content</FormLabel></span></span>
                  <FormControl></span></span>
                    <Textarea</span></span>
                      placeholder="Testing this great app!"</span></span>
                      {...field}</span></span>
                    /></span></span>
                  </FormControl></span></span>
                  <FormMessage /></span></span>
                </FormItem></span></span>
              )}</span></span>
            /></span></span>
            <Button className="w-full" type="submit"></span></span>
              Post</span></span>
            </Button></span></span>
          </form></span></span>
        </Form></span></span>
      </DialogContent></span></span>
    </Dialog></span></span>
  );</span></span>
}</span></span></code></pre>
src/app/page.tsx</code></p>
Haz fetch de los dats con Prisma, como esta página es un server component, podemos hacer fetch directamente.</p>
import { authOptions } from "@/libs/auth";</span></span>
import { getServerSession } from "next-auth";</span></span>
import prisma from "@/libs/db";</span></span>
import CreatePost from "@/components/post/create";</span></span>
import Post from "@/components/post";</span></span>
</span>
export default async function Home() {</span></span>
  const session = await getServerSession(authOptions);</span></span>
</span>
  // You can fetch data to Prisma in server components</span></span>
  const posts = await prisma.post.findMany({</span></span>
    include: {</span></span>
      author: true,</span></span>
    },</span></span>
  });</span></span>
</span>
  return (</span></span>
    <></span></span>
      <h1 className="mb-5 font-bold text-xl">Home</h1></span></span>
      {session ? (</span></span>
        <></span></span>
          <CreatePost session={session} /></span></span>
        </></span></span>
      ) : (</span></span>
        <></span></span>
          <p>You are not logged in</p></span></span>
        </></span></span>
      )}</span></span>
      <h3 className="text-lg font-semibold mt-10">Posts</h3></span></span>
      <ul className="mt-5 space-y-2.5"></span></span>
        {posts.length > 0 ? (</span></span>
          posts.map((post) => (</span></span>
            <li key={post.id}></span></span>
              <Post {...post} session={session} /></span></span>
            </li></span></span>
          ))</span></span>
        ) : (</span></span>
          <p>No posts</p></span></span>
        )}</span></span>
      </ul></span></span>
    </></span></span>
  );</span></span>
}</span></span></code></pre>
src/components/post/item.tsx</code></p>
"use client";</span></span>
</span>
import DeletePost from "./delete";</span></span>
import EditPost from "./edit";</span></span>
import { TPostProps } from "./types";</span></span>
</span>
export default function PostItem(props: TPostProps) {</span></span>
  return (</span></span>
    <article className="w-max p-2 border border-slate-500 rounded-md"></span></span>
      <header className="flex justify-between items-center"></span></span>
        <h2 className="font-bold text-lg">{props.title}</h2></span></span>
        {props.session?.user?.id === props.authorId && (</span></span>
          <section className="space-x-2"></span></span>
            <EditPost {...props} /></span></span>
            <DeletePost {...props} /></span></span>
          </section></span></span>
        )}</span></span>
      </header></span></span>
      <p>{props.content}</p></span></span>
      <span className="text-sm"></span></span>
        Posted by {props.author?.email || "anon"} at{" "}</span></span>
        {new Date(props.createdAt).toLocaleString()}</span></span>
      </span></span></span>
    </article></span></span>
  );</span></span>
}</span></span></code></pre>
src/components/post/edit.tsx</code></p>
Crea un botón para abrir un diálogo que renderice los datos del post para editar, agrega validación y fetch al endpoint de la API.</p>
"use client";</span></span>
</span>
import { useState } from "react";</span></span>
import { Edit } from "lucide-react";</span></span>
import {</span></span>
  Dialog,</span></span>
  DialogClose,</span></span>
  DialogContent,</span></span>
  DialogDescription,</span></span>
  DialogHeader,</span></span>
  DialogTitle,</span></span>
  DialogTrigger,</span></span>
} from "@/components/ui/dialog";</span></span>
import {</span></span>
  Form,</span></span>
  FormControl,</span></span>
  FormField,</span></span>
  FormItem,</span></span>
  FormLabel,</span></span>
  FormMessage,</span></span>
} from "@/components/ui/form";</span></span>
import { Input } from "@/components/ui/input";</span></span>
import { Textarea } from "@/components/ui/textarea";</span></span>
import { useForm } from "react-hook-form";</span></span>
import * as z from "zod";</span></span>
import { zodResolver } from "@hookform/resolvers/zod";</span></span>
import { useRouter } from "next/navigation";</span></span>
import { toast } from "sonner";</span></span>
import { Button } from "@/components/ui/button";</span></span>
import { TPostProps } from "./types";</span></span>
</span>
const formSchema = z.object({</span></span>
  title: z.string().min(1).max(100),</span></span>
  content: z.string().min(1),</span></span>
});</span></span>
</span>
export default function EditPost(props: TPostProps) {</span></span>
  const [open, setOpen] = useState(false);</span></span>
  const router = useRouter();</span></span>
  const form = useForm<z.infer<typeof formSchema>>({</span></span>
    resolver: zodResolver(formSchema),</span></span>
    defaultValues: {</span></span>
      title: props.title,</span></span>
      content: props.content,</span></span>
    },</span></span>
  });</span></span>
</span>
  async function onSubmit(values: z.infer<typeof formSchema>) {</span></span>
    try {</span></span>
      const res = await fetch("/api/posts", {</span></span>
        method: "PUT",</span></span>
        headers: { "Content-Type": "application/json" },</span></span>
        body: JSON.stringify({</span></span>
          ...values,</span></span>
          id: props.id,</span></span>
        }),</span></span>
      });</span></span>
      const json = await res.json();</span></span>
</span>
      if (!res.ok) {</span></span>
        toast(json.message);</span></span>
</span>
        return;</span></span>
      }</span></span>
</span>
      toast("Post edited!");</span></span>
      form.reset();</span></span>
      setOpen(false);</span></span>
      router.refresh();</span></span>
    } catch (error) {</span></span>
      console.error(error);</span></span>
    }</span></span>
  }</span></span>
</span>
  return (</span></span>
    <Dialog open={open} onOpenChange={setOpen}></span></span>
      <DialogTrigger asChild></span></span>
        <Button variant="secondary" size="icon"></span></span>
          <Edit /></span></span>
        </Button></span></span>
      </DialogTrigger></span></span>
      <DialogContent className="max-w-[300px]"></span></span>
        <DialogHeader className="text-left"></span></span>
          <DialogTitle>Edit post</DialogTitle></span></span>
          <DialogDescription></span></span>
            Please <strong>do not</strong> post <strong>NSFW</strong> content.</span></span>
          </DialogDescription></span></span>
        </DialogHeader></span></span>
        <Form {...form}></span></span>
          <form className="space-y-4" onSubmit={form.handleSubmit(onSubmit)}></span></span>
            <FormField</span></span>
              control={form.control}</span></span>
              name="title"</span></span>
              render={({ field }) => (</span></span>
                <FormItem></span></span>
                  <FormLabel>Title</FormLabel></span></span>
                  <FormControl></span></span>
                    <Input placeholder="Hi there!" {...field} /></span></span>
                  </FormControl></span></span>
                  <FormMessage /></span></span>
                </FormItem></span></span>
              )}</span></span>
            /></span></span>
            <FormField</span></span>
              control={form.control}</span></span>
              name="content"</span></span>
              render={({ field }) => (</span></span>
                <FormItem></span></span>
                  <FormLabel>Content</FormLabel></span></span>
                  <FormControl></span></span>
                    <Textarea</span></span>
                      placeholder="Testing this great app!"</span></span>
                      {...field}</span></span>
                    /></span></span>
                  </FormControl></span></span>
                  <FormMessage /></span></span>
                </FormItem></span></span>
              )}</span></span>
            /></span></span>
            <DialogClose asChild></span></span>
              <Button className="w-full" type="submit"></span></span>
                Edit post</span></span>
              </Button></span></span>
            </DialogClose></span></span>
          </form></span></span>
        </Form></span></span>
      </DialogContent></span></span>
    </Dialog></span></span>
  );</span></span>
}</span></span></code></pre>
src/components/post/delete.tsx</code></p>
Crea un botón para abrir un diálogo para eliminar el post, agrega validación y fetch al endpoint de la API.</p>
"use client";</span></span>
</span>
import { LucideTrash2 } from "lucide-react";</span></span>
import { Button } from "@/components/ui/button";</span></span>
import {</span></span>
  Dialog,</span></span>
  DialogClose,</span></span>
  DialogContent,</span></span>
  DialogDescription,</span></span>
  DialogHeader,</span></span>
  DialogTitle,</span></span>
  DialogTrigger,</span></span>
} from "@/components/ui/dialog";</span></span>
import { useRouter } from "next/navigation";</span></span>
import { toast } from "sonner";</span></span>
import { TPostProps } from "./types";</span></span>
</span>
export default function DeletePost(props: TPostProps) {</span></span>
  const router = useRouter();</span></span>
</span>
  async function handleDelete() {</span></span>
    try {</span></span>
      const res = await fetch("/api/posts", {</span></span>
        method: "DELETE",</span></span>
        headers: { "Content-Type": "application/json" },</span></span>
        body: JSON.stringify({</span></span>
          id: props.id,</span></span>
        }),</span></span>
      });</span></span>
      const json = await res.json();</span></span>
</span>
      if (!res.ok) {</span></span>
        toast(json.message);</span></span>
</span>
        return;</span></span>
      }</span></span>
</span>
      toast("Post deleted!");</span></span>
      router.refresh();</span></span>
    } catch (error) {</span></span>
      console.error(error);</span></span>
    }</span></span>
  }</span></span>
  return (</span></span>
    <Dialog></span></span>
      <DialogTrigger asChild></span></span>
        <Button variant="destructive" size="icon"></span></span>
          <LucideTrash2 /></span></span>
        </Button></span></span>
      </DialogTrigger></span></span>
      <DialogContent className="max-w-[300px]"></span></span>
        <DialogHeader className="text-left"></span></span>
          <DialogTitle>Delete post</DialogTitle></span></span>
          <DialogDescription></span></span>
            Are you sure you want to <strong>delete</strong> this post? This</span></span>
            action cannot be undone.</span></span>
          </DialogDescription></span></span>
        </DialogHeader></span></span>
        <footer className="flex flex-col gap-2"></span></span>
          <DialogClose asChild></span></span>
            <Button variant="secondary" className="w-full"></span></span>
              No, keep post</span></span>
            </Button></span></span>
          </DialogClose></span></span>
          <DialogClose asChild></span></span>
            <Button</span></span>
              onClick={handleDelete}</span></span>
              variant="destructive"</span></span>
              className="w-full"</span></span>
            ></span></span>
              Yes, delete post</span></span>
            </Button></span></span>
          </DialogClose></span></span>
        </footer></span></span>
      </DialogContent></span></span>
    </Dialog></span></span>
  );</span></span>
}</span></span></code></pre>
src/components/post/types.ts</code></p>
type SessionProps = {</span></span>
  session: any;</span></span>
};</span></span>
</span>
type TPostProps = {</span></span>
  author: {</span></span>
    id: string;</span></span>
    name: string | null;</span></span>
    email: string | null;</span></span>
    emailVerified: Date | null;</span></span>
    image: string | null;</span></span>
  } | null;</span></span>
  id: string;</span></span>
  createdAt: Date;</span></span>
  updatedAt: Date;</span></span>
  title: string;</span></span>
  content: string;</span></span>
  authorId: string | null;</span></span>
  session: any;</span></span>
};</span></span>
</span>
export type { SessionProps, TPostProps };</span></span></code></pre>
src/components/sign-out.tsx</code></p>
Un botón simple para cerrar sesión.</p>
"use client";</span></span>
</span>
import { signOut } from "next-auth/react";</span></span>
import { Button } from "./ui/button";</span></span>
</span>
export default function SignOut() {</span></span>
  return <Button onClick={() => signOut()}>Sign out</Button>;</span></span>
}</span></span></code></pre>
src/components/navbar.tsx</code></p>
Renderiza el botón de cerrar sesión o iniciar sesión dependiendo si el usuario está autenticado o no.</p>
import Link from "next/link";</span></span>
import { Button } from "./ui/button";</span></span>
import { getServerSession } from "next-auth";</span></span>
import { authOptions } from "@/libs/auth";</span></span>
import SignOut from "./sign-out";</span></span>
</span>
export default async function Navbar() {</span></span>
  const session = await getServerSession(authOptions);</span></span>
</span>
  return (</span></span>
    <nav className="w-full p-4 border-b flex justify-between items-center"></span></span>
      <section></span></span>
        <Button variant="link" className="px-0 font-semibold text-lg"></span></span>
          <Link href="/">Fullstack app</Link></span></span>
        </Button></span></span>
      </section></span></span>
      <section></span></span>
        {session ? (</span></span>
          <SignOut /></span></span>
        ) : (</span></span>
          <Button asChild></span></span>
            <Link href="/auth">Sign in</Link></span></span>
          </Button></span></span>
        )}</span></span>
      </section></span></span>
    </nav></span></span>
  );</span></span>
}</span></span></code></pre>
src/app/layout.tsx</code></p>
Agrega tu Navbar</strong> y Toaster</strong> y algunos estilos.</p>
import { Inter } from "next/font/google";</span></span>
import Navbar from "@/components/navbar";</span></span>
import { Toaster } from "@/components/ui/sonner";</span></span>
import "./globals.css";</span></span>
</span>
const inter = Inter({ subsets: ["latin"] });</span></span>
</span>
interface Props extends React.PropsWithChildren {}</span></span>
</span>
export default function RootLayout(props: Props) {</span></span>
  return (</span></span>
    <html lang="en"></span></span>
      <body className={inter.className}></span></span>
        <Navbar /></span></span>
        <main className="px-4 py-8">{props.children}</main></span></span>
        <Toaster /></span></span>
      </body></span></span>
    </html></span></span>
  );</span></span>
}</span></span></code></pre>4. Añade funcionalidad CRUD</h2>
Ahora podemos crear, leer, actualizar y eliminar posts.</p>
prisma/schema.prisma</code></p>
Actualiza tu schema de Prisma con el modelo Post:</p>
generator client {</span></span>
  provider = "prisma-client-js"</span></span>
}</span></span>
</span>
datasource db {</span></span>
  provider = "postgresql"</span></span>
  url      = env("DATABASE_URL")</span></span>
}</span></span>
</span>
model Account {</span></span>
  id                String  @id @default(cuid())</span></span>
  userId            String</span></span>
  type              String</span></span>
  provider          String</span></span>
  providerAccountId String</span></span>
  refresh_token     String? @db.Text</span></span>
  access_token      String? @db.Text</span></span>
  expires_at        Int?</span></span>
  token_type        String?</span></span>
  scope             String?</span></span>
  id_token          String? @db.Text</span></span>
  session_state     String?</span></span>
</span>
  user User @relation(fields: [userId], references: [id], onDelete: Cascade)</span></span>
</span>
  @@unique([provider, providerAccountId])</span></span>
}</span></span>
</span>
model Session {</span></span>
  id           String   @id @default(cuid())</span></span>
  sessionToken String   @unique</span></span>
  userId       String</span></span>
  expires      DateTime</span></span>
  user         User     @relation(fields: [userId], references: [id], onDelete: Cascade)</span></span>
}</span></span>
</span>
model User {</span></span>
  id            String    @id @default(cuid())</span></span>
  name          String?</span></span>
  email         String?   @unique</span></span>
  emailVerified DateTime?</span></span>
  image         String?</span></span>
  accounts      Account[]</span></span>
  sessions      Session[]</span></span>
  posts         Post[]</span></span>
}</span></span>
</span>
model VerificationToken {</span></span>
  identifier String</span></span>
  token      String   @unique</span></span>
  expires    DateTime</span></span>
</span>
  @@unique([identifier, token])</span></span>
}</span></span>
</span>
model Post {</span></span>
  id        String   @id @default(cuid())</span></span>
  createdAt DateTime @default(now())</span></span>
  updatedAt DateTime @updatedAt</span></span>
  title     String</span></span>
  content   String</span></span>
  author    User     @relation(fields: [authorId], references: [id])</span></span>
  authorId  String</span></span>
}</span></span></code></pre>
Genera una nueva migración:</p>
npx prisma migrate dev --name add-posts</span></span></code></pre>
Ahora, create un archivo src/app/api/posts/route.ts</code> con las funciones asíncronas GET</strong>, PUT</strong> y DELETE</strong>:</p>
import prisma from "@/libs/db";</span></span>
import { NextRequest, NextResponse } from "next/server";</span></span>
</span>
export async function POST(req: Request) {</span></span>
  try {</span></span>
    if (!req.body) {</span></span>
      return NextResponse.json({</span></span>
        ok: false,</span></span>
        status: 400,</span></span>
        message: "Data required",</span></span>
      });</span></span>
    }</span></span>
</span>
    const json = await req.json();</span></span>
    const res = await prisma.post.create({</span></span>
      data: json,</span></span>
    });</span></span>
</span>
    return NextResponse.json({</span></span>
      ok: true,</span></span>
      status: 201,</span></span>
      data: res,</span></span>
    });</span></span>
  } catch (error) {</span></span>
    if (error instanceof Error) {</span></span>
      return NextResponse.json({</span></span>
        ok: false,</span></span>
        status: 500,</span></span>
        message: error.message,</span></span>
      });</span></span>
    }</span></span>
</span>
    return NextResponse.json({</span></span>
      ok: false,</span></span>
      status: 500,</span></span>
      message: "Internal server error",</span></span>
    });</span></span>
  }</span></span>
}</span></span>
</span>
export async function PUT(req: NextRequest) {</span></span>
  try {</span></span>
    const body = await req.json();</span></span>
    const res = await prisma.post.update({</span></span>
      where: { id: body.id },</span></span>
      data: {</span></span>
        title: body.title,</span></span>
        content: body.content,</span></span>
      },</span></span>
    });</span></span>
</span>
    return NextResponse.json({</span></span>
      ok: true,</span></span>
      status: 200,</span></span>
      data: res,</span></span>
    });</span></span>
  } catch (error) {</span></span>
    if (error instanceof Error) {</span></span>
      return NextResponse.json({</span></span>
        ok: false,</span></span>
        status: 500,</span></span>
        message: error.message,</span></span>
      });</span></span>
    }</span></span>
</span>
    return NextResponse.json({</span></span>
      ok: false,</span></span>
      status: 500,</span></span>
      message: "Internal server error",</span></span>
    });</span></span>
  }</span></span>
}</span></span>
</span>
export async function DELETE(req: NextRequest) {</span></span>
  try {</span></span>
    const body = await req.json();</span></span>
    const res = await prisma.post.delete({</span></span>
      where: { id: body.id },</span></span>
    });</span></span>
</span>
    return NextResponse.json({</span></span>
      ok: true,</span></span>
      status: 200,</span></span>
      data: res,</span></span>
    });</span></span>
  } catch (error) {</span></span>
    if (error instanceof Error) {</span></span>
      return NextResponse.json({</span></span>
        ok: false,</span></span>
        status: 500,</span></span>
        message: error.message,</span></span>
      });</span></span>
    }</span></span>
</span>
    return NextResponse.json({</span></span>
      ok: false,</span></span>
      status: 500,</span></span>
      message: "Internal server error",</span></span>
    });</span></span>
  }</span></span>
}</span></span></code></pre>
Intenta crear un post en el home.</p>
La página se refrescará y verás el post que creaste, solo tú puedes editarlo o eliminarlo.</p>
5. Conclusión</h2>
Como puedes ver, crear una app fullstack con Next.js es muy fácil.</p>
Por supuesto, se puede mejorar, agregando validación del lado del servidor para los inputs, agregando paginación para los posts en el home, etc.</p>

Cómo Funcionan las Computadoras

2023-05-29T00:00:00+00:00

Hoy en día usamos, de alguna manera, una computadora en casi toda actividad de nuestras vidas, podría ser para trabajo o solo por diversión, pero si lo pensamos con cuidado, las computadoras son un invento del siglo pasado, y han cambiado nuestras vidas.</p>

Nuevos empleos han aparecido, nuevas carreras por estudiar, nuevos problemas por resolver.</p>

Pero, ¿realmente sabemos cómo las computadoras penetraron en nuestras vidas?, ¿realmente sabemos cómo funciona una computadora?, ¿cómo funciona Internet?</p>

Hay muchas personas que usan sus smartphones para comunicarse con su familia y amigos, para compartir sus vidas, pero no saben cómo es esto posible.</p>

No estoy diciendo que todos deberían tener una Ingeniería en Software o ser expertos en IT, pero entender nuestra actual línea temporal puede ser un conocimiento destacable a tener.</p>

El poder de las computadoras</h2>
Las computadoras están hechas para expandir nuestros cerebros, desde cosas como enviar mensajes a personas del otro lado del planeta, hasta crear una app que agiliza un proceso de entrega.</p>
Todo esto se hace tan solo “girando” unos y ceros (1´s y 0´s), pero, ¿cómo es esto posible?</p>
Si ya has visto Él Código Enigma, ya sabes parte de esa historia.</p>

Fundamentos de Computación</h3>
Alan Turing fue el inventor de la Máquina de Turing, una simple pero poderosa máquina que puede recibir instrucciones para moverse en una larga cinta, cambiando el estado de cada ranura. Estas 3 cosas, una cabeza, una cinta larga y un conjunto de instrucciones son las bases para las computadoras modernas.</p>
La cabeza es la Unidad de Procesamiento Central (CPU), una pieza de hardware que puede ser usada con propósitos generales, recibiendo instrucciones (Algoritmo) que son convertidos a pulsos eléctricos, entendiendo si la electricidad pasa o no, si es verdadero o falso, 1 ó 0. Todas estas instrucciones son guardadas en la Memoria Aleatoria de Acceso, Random Access Memory (RAM) para un acceso rápido del trabajo que se ha hecho. La Memoria de Solo Lectura, Read-Only Memory (ROM) es usada para guardar datos persistentes que se necesitan recuperar aunque la computadora se apague.</p>
Un algoritmo puede ser visto como una receta de cocina, declaras los ingredientes (variables) y los pasos a seguir (funciones) para obtener un resultado.</p>
Una variable es un identificador que apunta a un slot en la RAM, guardando un valor que puede ser un número, un texto (se le conoce como “string”), un booleano (true o false), un object (un conjunto de múltiples variables y funciones que puede ser instanciado), etc.</p>
Las funciones son bloques de instrucciones que cumplen una tarea, como obtener la ubicación actual o enviar un mensaje.</p>
Y te estarás preguntando, ¿cómo puedo decirle a una computadora lo que quiero hacer?</p>

Lenguajes de programación</h3>
Si intentas hablar con alguien que no habla el mismo idioma que tu, intentas usar un traductor o usas gestos, algo que sabes que ambos puedan de alguna manera entender, lo mismo ocurre con las computadoras.</p>
Las computadoras son poderosas, pero necesitan a alguien que les diga qué hacer, este es el trabajo de los humanos, y para conseguirlo usamos lenguajes de programación. Con un lenguaje de programación usas una sintaxis específica para decirle a la computadora lo que quieres hacer, una vez hecho esto compilas el archivo que contiene las instrucciones que escribiste, entonces es transformado a un lenguaje que las computadoras pueden entender con mayor facilitad (1´s y 0´s) y entonces la computadora realiza la tarea.</p>
Hay diferentes lenguajes de programación, y todos ellos están diseñados para solucionar necesidades específicas. Lenguajes como C y C++ son lenguajes de bajo nivel, esto quiere decir que son muy cercanos a cómo una computadora “habla” y son usados para controlar y administrar la memoria en apps de alto rendimiento, o para iluminar las pantallas de tu computadora.</p>
Existe Java, un lenguaje que crea un entorno cuando es compilado, lo que le permite ser utilizado en casi cualquier computadora.</p>
JavaScript (NO tiene que ver con Java o algo así) es un lenguaje que los navegadores entienden, gracias a JavaScript podemos acceder a una página web y ver asombrosas interacciones cuando le damos click a un botón, inicar sesión con un username y password, y más.</p>
JavaScript es un lenguaje de alto nivel, es más fácil de aprender que Java o C, pero no por eso es mejor o peor, simplemente resuelve una necesidad diferente.</p>

El Navegador</h3>
Es un poderoso software que puede acceder a otras computadoras usando el Hyper Text Transfer Protocol (HTTP), significa que gracias a este protocolo distintas computadoras pueden enviar y recibir información para comunicarse, incluso si están muy lejos. Los navegadores reciben datos en forma de archivos, principalmente tres:</p>

Hyper Text Markup Language (HTML)</li>
Cascading Styles Sheets (CSS)</li>
JavaScript</li> </ul>
HTML</h3>
Ayuda al navegador a estructurar los datos como textos o imágenes, usando un lenguaje de marcado (mediante tags). El navegador puede reconocer dónde hay un input para escribir nuestro email, o un botón para subscribirnos a nuestro artista favorito.</p>
CSS</h3>
Ayuda a colorear y formar los tags de HTML usando selectores. Puede ser usado para cambiar el color de fondo de la página, darle a un botón bordes redondeados, cambiar el color de texto, todo lo que tu creatividad pueda imaginar.</p>
JavaScript</h3>
Combinando HTML y CSS con Javascript se crea un sitio web interactivo, o aplicación web (como este). Puedes por ejemplo, añadir un botón que cambie el tema oscuro al claro, o guardar items en un carrito de compras y mostrar el número de items que tienes guardados.</p>
Para todo esto necesitas guardar tus archivos en algún sitio, permitiéndole a las personas acceder a la computadora para descargar todos estos archivos usando sus navegadores, y para eso existen los servidores.</p>
Los servidores son computadoras conectadas a Internet, guardan archivos que pueden ser descargados o subidos usando protocolos y reglas de seguridad. Algunas compañías como Google o Microsoft tienen múltiples centros con muchos servidores en diferentes regiones en el planeta, llamados Data Centers, y pueden ser usados por una tarifa para guardar tu web app, estos múltiples Data Centers se les conoce como Cloud.</p>
La Nube</h3>
Administrar una poderosa computadora puede ser difícil, pero si sabes cómo usarla, puedes ahorrarte mucho dinero en lugar de mantener servidores locales que necesiten estar encendidos 24/7. Gracias a la Cloud podemos entregar apps más rápidas, y podemos tener un servicio 24/7 para nuestros clientes con un costo marginal.</p>
Las Computadoras Cambiaron la Humanidad</h2>
Las computadoras simplifican nuestras tareas diarias, el software puede ser fácilmente replicado y distribuido sin la necesidad de logística como si lo necesita un producto tangible. Solo necesitas una conexión a Internet para acceder al proyecto de alguien.</p>
No necesitas una fábrica o un recurso natural como madera para producir papel, necesitas un grupo de ingenieros, diseñadores UX/UI, digital marketers, y otras personas enfocadas en IT para alcanzar a miles de clientes.</p>
La razón por la que las computadoras son tan poderosas es debido a que su costo marginal es mínimo, no necesitas extraer una materia prima de la tierra para construir una app, necesitas un grupo de personas talentosas que usen sus cerebros para crear soluciones.</p>

Recursos adicionales</h2>
Busca más servicios que respeten tu privacidad y datos.</p>

Monerica</a></li>
kycnot.me</a></li>
The OPSEC Bible</a> (.onion, abre este link en Tor Browser)</li> </ul>

Agregando Feeds de Redes Sociales</h3>
Puedes agregar incluso feeds de sitios como Reddit o YouTube.</p>

Más Sobre RSS</h2>

Privacy Tools - RSS Feed Readers</a></li>
Privacy Guides - News Aggregators</a></li> </ul>

5. Conclusión</h2>
Como puedes ver, crear una app fullstack con Next.js es muy fácil.</p>
Por supuesto, se puede mejorar, agregando validación del lado del servidor para los inputs, agregando paginación para los posts en el home, etc.</p>

¡Felices fiestas!</h3>
</p>

Manual de Supervivencia Ante el Registro de Lineas en México

Celular</h2>
Los Google Pixel son los mejores celulares en términos de seguridad, tanto es así que es el único hardware compatible con GrapheneOS, el Operative System más seguro y privado con base en Android disponible para dispositivos de bolsillo.</p>

La Privacidad Debe Ser Tomada Más en Serio

Website migrado a Astro

Una Mejor Forma de Consumir Contenido

Construye una App Fullstack

Next Intl Blog Template

Rewind 2023 y Planes Futuros

Participé en una Hackaton

La Monotonia de las Redes Sociales

Blog inspirado en “Why does every personal website look like this now?” by Eric Murphy en YouTube.</h6>
Video de origen (en Inglés):</p> </iframe>

Cómo Funcionan las Computadoras

HTML</h3>
Ayuda al navegador a estructurar los datos como textos o imágenes, usando un lenguaje de marcado (mediante tags). El navegador puede reconocer dónde hay un input para escribir nuestro email, o un botón para subscribirnos a nuestro artista favorito.</p>

CSS</h3>
Ayuda a colorear y formar los tags de HTML usando selectores. Puede ser usado para cambiar el color de fondo de la página, darle a un botón bordes redondeados, cambiar el color de texto, todo lo que tu creatividad pueda imaginar.</p>

La Razón para Crear una Versión 2.0 de mi Website

Manual de Supervivencia Ante el Registro de Lineas en México

Celular</h2> Los Google Pixel son los mejores celulares en términos de seguridad, tanto es así que es el único hardware compatible con GrapheneOS, el Operative System más seguro y privado con base en Android disponible para dispositivos de bolsillo.</p>

Recursos adicionales</h2> Busca más servicios que respeten tu privacidad y datos.</p>

La Privacidad Debe Ser Tomada Más en Serio

Website migrado a Astro

Una Mejor Forma de Consumir Contenido

Agregando Feeds de Redes Sociales</h3> Puedes agregar incluso feeds de sitios como Reddit o YouTube.</p>

Reddit</h4> Solo cambia [SUBREDDIT]</code> por el nombre del subreddit a añadir:</p>

YouTube</h4> Ve a el canal por añadir, luego ve a la pestaña “Acerca de”, da click en Compartir > Copiar ID del Canal</strong>.</p> Ahora solo cambia [CHANNEL ID]</code> por el copiado:</p>

Construye una App Fullstack

2.1 Instalar shadcn/ui</h3> Estos componentes nos ayudarán mucho a construir la UI</strong> junto con TailwindCSS.</p> Primero, inicializa shadcn/ui:</p>

2.3 Instalar Prisma</h3> Instala Prisma usando tu gestor de dependencias, en este caso npm</strong>:</p>

5. Conclusión</h2> Como puedes ver, crear una app fullstack con Next.js es muy fácil.</p> Por supuesto, se puede mejorar, agregando validación del lado del servidor para los inputs, agregando paginación para los posts en el home, etc.</p>

Next Intl Blog Template

Rewind 2023 y Planes Futuros

Participé en una Hackaton

La Monotonia de las Redes Sociales

Blog inspirado en “Why does every personal website look like this now?” by Eric Murphy en YouTube.</h6> Video de origen (en Inglés):</p> </iframe>

Cómo Funcionan las Computadoras

HTML</h3> Ayuda al navegador a estructurar los datos como textos o imágenes, usando un lenguaje de marcado (mediante tags). El navegador puede reconocer dónde hay un input para escribir nuestro email, o un botón para subscribirnos a nuestro artista favorito.</p>

CSS</h3> Ayuda a colorear y formar los tags de HTML usando selectores. Puede ser usado para cambiar el color de fondo de la página, darle a un botón bordes redondeados, cambiar el color de texto, todo lo que tu creatividad pueda imaginar.</p>

La Razón para Crear una Versión 2.0 de mi Website

Celular</h2>
Los Google Pixel son los mejores celulares en términos de seguridad, tanto es así que es el único hardware compatible con GrapheneOS, el Operative System más seguro y privado con base en Android disponible para dispositivos de bolsillo.</p>

Recursos adicionales</h2>
Busca más servicios que respeten tu privacidad y datos.</p>

Monerica</a></li>
kycnot.me</a></li>
The OPSEC Bible</a> (.onion, abre este link en Tor Browser)</li> </ul>

Agregando Feeds de Redes Sociales</h3>
Puedes agregar incluso feeds de sitios como Reddit o YouTube.</p>

5. Conclusión</h2>
Como puedes ver, crear una app fullstack con Next.js es muy fácil.</p>
Por supuesto, se puede mejorar, agregando validación del lado del servidor para los inputs, agregando paginación para los posts en el home, etc.</p>

Blog inspirado en “Why does every personal website look like this now?” by Eric Murphy en YouTube.</h6>
Video de origen (en Inglés):</p> </iframe>

HTML</h3>
Ayuda al navegador a estructurar los datos como textos o imágenes, usando un lenguaje de marcado (mediante tags). El navegador puede reconocer dónde hay un input para escribir nuestro email, o un botón para subscribirnos a nuestro artista favorito.</p>

CSS</h3>
Ayuda a colorear y formar los tags de HTML usando selectores. Puede ser usado para cambiar el color de fondo de la página, darle a un botón bordes redondeados, cambiar el color de texto, todo lo que tu creatividad pueda imaginar.</p>