El portafolio de un desarrollador es una colección de muestras de trabajo y proyectos que muestran tus habilidades y experiencia. Un portafolio sólido te diferencia de otros candidatos cuando buscas trabajo. Pero no sólo eso: un portafolio también puede ser una valiosa herramienta para establecer contactos, hacer un seguimiento de tus aprendizajes y establecerte como experto en la materia.

En este tutorial, aprenderás a crear un portafolio de desarrollador utilizando Next.js y a desplegarlo directamente desde tu repositorio de GitHub a la plataforma de Alojamiento de Aplicaciones de Kinsta, que proporciona un dominio .kinsta.app gratuito para que tu trabajo se publique rápidamente.

Aquí tienes una demostración en vivo del portafolio de desarrollador que construirás con Next.js.

Puedes acceder al repositorio GitHub de este proyecto si quieres echarle un vistazo más de cerca, o puedes usar esta plantilla de proyecto de inicio de portfolio seleccionando Usar esta plantilla > Crear un nuevo repositorio — esto copiará el código de inicio en un nuevo repositorio. El proyecto de inicio contiene códigos básicos como los estilos, un enlace Font Awesome CDN, imágenes y estructura básica.

Requisitos

Este es un tutorial del tipo «sígueme». Te será más fácil codificar si tienes:

¿Por Qué Next.js?

Next.js es un framework de bibliotecas JavaScript de código abierto basado en React que puede utilizarse para una amplia gama de proyectos de desarrollo web, ya que simplifica la creación de aplicaciones estáticas y renderizadas del lado del servidor. Agiliza el proceso aprovechando las mejores características de React y optimizando el rendimiento del renderizado para mejorar la experiencia del usuario. Algunos de los casos de uso más comunes de Next.js son:

  • Crear sitios web estáticos: Next.js puede construir sitios web estáticos que son rápidos, fáciles de desplegar y requieren un mantenimiento mínimo, como el sitio web del portafolio de desarrolladores que construiremos a lo largo de este tutorial.
  • Crear sitios web dinámicos: Next.js te permite crear sitios web dinámicos que pueden cambiar su contenido en función de las interacciones del usuario o de la obtención de datos del servidor.
  • Crear sitios web de comercio electrónico: Next.js es idóneo para crear sitios web de comercio electrónico que requieran la renderización del lado del servidor para mejorar el SEO y el rendimiento.
  • Crear aplicaciones web progresivas (PWA – progressive web application): Next.js admite la creación de PWA, que son aplicaciones web que funcionan como apps nativas y pueden instalarse en el dispositivo de un usuario.

Cómo Configurar Tu Entorno de Desarrollo de Next.js

Para configurar un entorno de desarrollo para Next.js, primero instala Node.js en tu ordenador, porque utilizarás el comando npx para ejecutar paquetes npm sin tener que instalarlos globalmente en tu sistema. Una vez hecho esto, ya puedes crear un proyecto Next.js ejecutando el siguiente comando:

npx create-next-app@latest my-portfolio

Aparecerá un aviso pidiéndote que confirmes algunas dependencias adicionales. A continuación, puedes ejecutar npm run dev para que tu aplicación esté disponible en localhost:3000.

Crear un nuevo proyecto Next.js.
Crear un nuevo proyecto Next.js.

Cuando se crea un proyecto Next.js utilizando el comando npx, se crea automáticamente una estructura de carpetas con los siguientes directorios principales:

  1. pages: Esta carpeta contiene las páginas de la aplicación, que se direccionan automáticamente en función de su nombre de archivo. Por ejemplo, pages/index.js sería la página de inicio, mientras que pages/about.js sería la página acerca de.
  2. public: Esta carpeta contiene archivos estáticos que se pueden servir directamente, como imágenes, fuentes y otros activos.
  3. components: Esta carpeta es opcional y contiene componentes de interfaz de usuario reutilizables que pueden usarse en toda la aplicación.
  4. estilos: Esta carpeta también es opcional y contiene estilos globales que pueden aplicarse en toda la aplicación.

También pueden generarse otros directorios y archivos en función de la configuración y las características específicas, pero estos son los directorios principales de un proyecto Next.js básico.

Para este tutorial, todo lo que construyamos aparecerá en la página índice (nuestro sitio web de una sola página), e incluirás componentes para varias secciones como el héroe, acerca de, proyectos y otras.

Cómo Crear un Portafolio Responsivo para Desarrolladores con Next.js

Un portafolio suele constar de componentes como estos:

  • Componente Navbar
  • Componente Hero
  • Componente Acerca de
  • Componente Habilidades
  • Componente Proyectos
  • Componente Contacto
  • Componente Pie de página

Se espera que los componentes Barra de navegación y Pie de página aparezcan en todas las páginas si el c tiene más de una página. Esto se puede conseguir en Next.js definiendo un diseño.

Definir diseños en Next.js

En Next.js, un diseño es una forma de definir una estructura coherente para los componentes que aparecen en cada página de un sitio web. El diseño suele incluir elementos como una cabecera, un menú de navegación y un pie de página que aparecen en todas las páginas del sitio.

Empieza creando una carpeta de componentes en el directorio src (source) de tu proyecto Next.js. A continuación, crea los componentes Navbar y Footer que se utilizarán dentro del componente Layout.

Aquí tienes el componente Navbar en Navbar.jsx:

// components/Navbar.jsx

import Link from "next/link";

const Navbar = () => {
  return (
    <div className="nav-container">
      <div className="logo">
        <Link href="/">
          Joe's Portfolio
        </Link>
      </div>
      <a href="" className="cta-btn">Resume</a>
    </div>
  )
}

export default Navbar;

Aquí está el componente Footer en Footer.jsx:

// components/Footer.jsx

const Footer = () => {
  return (
    <>
      <hr/>
      <div className="footer-container">
        <p>
          © {new Date().getFullYear()} Joel's Portfolio
        </p>
        <div className="social_icons">
          <a
            href="https://twitter.com/olawanle_joel"
            aria-label="Twitter"
            target="_blank"
            rel="noopener noreferrer"
          >
            <i className="fa-brands fa-twitter"></i>
          </a>
          <a
            href="https://github.com/olawanlejoel"
            aria-label="GitHub"
            target="_blank"
            rel="noopener noreferrer"
          >
            <i className="fa-brands fa-github"></i>
          </a>
          <a
            href="https://www.linkedin.com/in/olawanlejoel/"
            aria-label="LinkedIn"
            target="_blank"
            rel="noopener noreferrer"
          >
            <i className="fa-brands fa-linkedin"></i>
          </a>
        </div>
      </div>
    </>
  )
}

export default Footer;

Nota: Para que los iconos de Font Awesome funcionen, debes instalar Font Awesome en tu proyecto o utilizar su CDN. Puedes añadir el enlace CDN a tu archivo _document.js de la siguiente manera:

// pages/_document.js

import { Html, Head, Main, NextScript } from 'next/document';

export default function Document() {
  return (
    <Html lang="en">
      <Head>
        <meta charSet="utf-8" />
        <link
          rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
          integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
          crossorigin="anonymous"
          referrerpolicy="no-referrer"
        />
      </Head>
      <body>
      <Main />
      <NextScript />
      </body>
    </Html>
  );
}

Nota: Si enlazas una versión diferente de Font Awesome a través de la CDN, tendrás que cambiar por encima el hash integrity apropiado para esa versión.

Después de crear todos los componentes necesarios para tu diseño, puedes crear el propio componente Layout y añadir este componente a tus páginas envolviendo el contenido de tu página dentro de él.

El componente Layout aceptará una propiedad <code>children</code>, que te permitirá acceder al contenido de tus páginas Next.js.

// components/Layout.jsx

import Navbar from './navbar';
import Footer from './footer';

const Layout = ({ children }) => {
  return (
    <>
      <Navbar />
      <main>{children}</main>
      <Footer />
    </>
  )
}

export default Layout;

Llegados a este punto, ya has creado con éxito el componente Layout, que contiene la barra de navegación y el pie de página junto con los accesorios children colocados correctamente. Ahora puedes añadir el componente Layout a tus páginas envolviendo el contenido de la página en él. Esto se hará en el archivo _app.js.

// pages/_app.js

import '@/styles/globals.css';
import Layout from '../components/layout';

export default function App({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
}

Ya has conseguido crear un diseño para tu portafolio de desarrollador. Para este portafolio, nos centramos más en Next.js y en cómo desplegar tu sitio web en Kinsta. Así que puedes copiar los estilos del archivo styles/globals.css en tu propio proyecto. Si inicias el sitio web de tu portafolio en modo dev, ahora deberías ver el diseño de tu aplicación.

Componente de diseño
Componente de diseño

Ahora es el momento de dotar a tu sitio web de portafolio del contenido adecuado.

Crear componentes de portafolio

Ahora puedes crear componentes individuales para cada sección de tu portafolio de desarrollador. Todos estos componentes se importarán a la página índice de tu proyecto Next.js, para que puedan mostrarse cuando lances tu proyecto con npm run dev.

El componente Hero

El componente Hero es la primera sección debajo de la Barra de Navegación, cuyo objetivo principal es captar la atención del usuario y darle una idea de lo que trata el sitio web o la aplicación.

// components/Hero.jsx

import Image from "next/image";

const Hero = () => {
  return (
    <div className="hero-container">
      <Image src='/images/profile.jpeg' className="profile-img" width={300} height={300} alt="Joe's personal headshot" />
      <div className="hero-text">
        <h1>Hey, I'm Joe 👋</h1>
        <p>
          I'm a software developer based in Lagos, Nigeria. I specialize in building (and occasionally designing)
          exceptional websites, applications, and everything in between.
        </p>
        <div className="social-icons">
          <a
            href="https://twitter.com/olawanle_joel"
            aria-label="Twitter"
            target="_blank"
            rel="noopener noreferrer"
          >
            <i className="fa-brands fa-twitter"></i>
          </a>
          <a
            href="https://github.com/olawanlejoel"
            aria-label="GitHub"
            target="_blank"
            rel="noopener noreferrer"
          >
            <i className="fa-brands fa-github"></i>
          </a>
          <a
            href="https://www.linkedin.com/in/olawanlejoel/"
            aria-label="LinkedIn"
            target="_blank"
            rel="noopener noreferrer"
          >
            <i className="fa-brands fa-linkedin"></i>
          </a>
        </div>
      </div>
    </div>
  )
}

export default Hero;

En el código anterior, observarás que se utiliza el componente Next.js Image en lugar de la etiqueta HTML img para añadir la imagen, ya que permite la optimización automática de la imagen, el cambio de tamaño y muchas cosas más.

En el componente Acerca de, también observarás que se ha añadido un párrafo sencillo para decir algo sobre el desarrollador junto con algunos iconos sociales de Font Awesome para añadir enlaces sociales.

Este es el aspecto que debería tener el componente Hero:

Componente Hero
Componente Hero

Puedes añadir más contenido al componente Hero, modificar los estilos en el archivo styles/globals.css o incluso recrear esta sección a tu manera.

El componente About

El componente About está pensado para dar a los lectores o a las personas que visiten tu portafolio más información sobre ti en tantos párrafos como quieras. Si quieres contar más cosas sobre ti, puedes crear una página dedicada «Sobre mí» y añadir un botón en esta sección para leer más sobre ti.

// components/About.jsx

import Image from "next/image";

const About = () => {
  return (
    <div className="about-container">
      <h2>About Me</h2>
      <div className="flex-about">
        <div className="about-text">
          <p>
            As a developer, I have always been passionate about creating elegant and effective solutions to
            complex problems. I have a strong foundation in software development, with a focus on web
            technologies such as HTML, CSS, and JavaScript. I enjoy working on both the front-end and
            back-end of applications, and I am always looking for ways to optimize performance, improve user
            experience, and ensure the highest level of code quality.
          </p>
          <p>Throughout my career, I have worked on a wide range of projects, from simple static websites to
            complex enterprise-level applications. I am experienced in working with a variety of development
            tools and frameworks, including React, Angular, Vue.js, Node.js, and Laravel. I am always eager
            to learn and explore new technologies, and I am constantly seeking out opportunities to improve
            my skills and knowledge.</p>
        </div>
        <div className="about-img">
          <Image src='/images/about.jpeg' className="profile-img" width={300} height={500}/>
        </div>
      </div>
    </div>
  )
}

export default About;

El código anterior contiene dos párrafos de texto sobre el promotor y una imagen del mismo. Este es el aspecto que se espera que tenga la sección «About Me»:

Componente About
Componente About

Siempre puedes modificar los estilos para añadir más imágenes y muchas cosas más.

El componente Skills

El componente de Skills está pensado para mostrar algunas de las tecnologías más utilizadas por el desarrollador o las tecnologías que el desarrollador ha utilizado en el pasado.

Componente de Skills
Componente de Skills

Puedes hacer que esto sea más fácil de mantener creando una matriz en un archivo externo y luego importándola al componente de habilidades, de modo que puedas hacer un bucle en lugar de duplicar código similar.

// components/Skills.jsx

const Skills = () => {
  return (
    <div className="skills-container">
      <h2>Skills</h2>
      <div className="grid-skills">
        <div className="skill-card html">
          <i className="fa-brands fa-html5 html-icon"></i>
          <p>HTML</p>
        </div>
        <div className="skill-card css">
          <i className="fa-brands fa-css3-alt css-icon"></i>
          <p>CSS</p>
        </div>
        <div className="skill-card js">
          <i className="fa-brands fa-js-square js-icon"></i>
          <p>JavaScript</p>
        </div>
        <div className="skill-card react">
          <i className="fa-brands fa-react react-icon"></i>
          <p>React</p>
        </div>
        <div className="skill-card node">
          <i className="fa-brands fa-node-js node-icon"></i>
          <p>Node</p>
        </div>
        <div className="skill-card python">
          <i className="fa-brands fa-python python-icon"></i>
          <p>Python</p>
        </div>
      </div>
    </div>
  )
}

export default Skills;

En el código anterior, se crea una tarjeta para cada habilidad, y cada tarjeta contendrá el icono de la tecnología de font-awesome y el nombre de la tecnología. También puedes añadir más estilos y retocar el código para hacerlo más atractivo y único.

El componente Projects

El componente de Projects es una de las secciones importantes del portafolio de un desarrollador. Los proyectos proporcionan pruebas tangibles de las habilidades y capacidades de un desarrollador y muestran su capacidad para aplicar sus conocimientos a problemas del mundo real.

Cada proyecto incluirá una breve descripción del mismo, un enlace a su código fuente (aquí utilizamos enlaces de GitHub) y cualquier otro detalle que desees añadir.

Componente Projects
Componente Projects

Puedes crear una matriz que contenga los detalles de cada proyecto e importarla a tu componente para evitar codificarlos.

Vamos a crear un archivo data.js para almacenar la matriz de datos del proyecto. Puedes guardar este archivo en la carpeta del componente o en la carpeta pages/api. Para esta demo, lo almacenaré en la carpeta components. Esta matriz contendrá un objeto para cada proyecto, y el objeto contendrá el nombre del proyecto, la descripción y el enlace de GitHub.

// components/data.js

export const projectData = [
  {
    id: 1,
    title: 'Todo List App',
    description:
      'A simple Todo List App built with JavaScript. All datas are stored in localstorage. It helps users check list out their plans and tick as they do them.',
    gitHubLink: 'https://github.com/olawanlejoel/Todo-List-App',
  },
  {
    id: 2,
    title: 'Books Library App',
    description:
      'A simple Book Library App built with JavaScript. It helps readers have a good list of books they are either currently reading or have finished reading.',
    gitHubLink: 'https://github.com/olawanlejoel/Book-Library',
  },
  {
    id: 3,
    title: 'Quotes Generator',
    description:
      'Helps you generate quotes from about 1600 quotes written by different authors . Quotes are automatically copied to your clipboards.',
    gitHubLink: 'https://github.com/olawanlejoel/random-quote-generator',
  },
  {
    id: 4,
    title: 'Password Generator',
    description:
      'Helps you generates random passwords, you can select what you want your password to entail and also you can copy generated password to clipboard.',
    gitHubLink: 'https://github.com/olawanlejoel/Password-Generator',
  },
  {
    id: 5,
    title: 'Twitter UI Clone',
    description:
      'Simple Twitter UI clone built with TailwindCSS and Vue Js. This covers only the homepage of Twitter UI. This is cool to get started with TailwindCSS as it helps understand basic concepts.',
    gitHubLink: 'https://github.com/olawanlejoel/TwitterUI-clone',
  },
];

Ahora puedes crear un componente de proyecto para utilizar estos datos haciendo un bucle fácilmente. Puedes utilizar cualquier método de iteración de JavaScript, pero para este tutorial, puedes utilizar el método de matriz JavaScript map() para recorrer en bucle la matriz de datos después de importarla al componente Projects.

// components/Projects.jsx

import { projectData } from './data.js';

const Projects = () => {
  return (
    <div className="projects-container">
      <h2>Projects</h2>
      <div className="projects-grid">
        {projectData && projectData.map((project) => (
          <div className="project-card" key={project.id}>
            <div className="project-header">
              <i className="fa-regular fa-folder-open folder-icon"></i>
              <div className="small-icons">
                <a href={project.gitHubLink}><i className="fa-brands fa-github"></i></a>
              </div>
            </div>
            <h3>{project.title}</h3>
            <p>{project.description}</p>
          </div>
        ))
        }
      </div>
    </div>
  )
}

export default Projects;

En el código anterior, has evitado con éxito la repetición mediante el bucle a través de la matriz para dar salida a todos los proyectos en el componente Projects, lo que facilita el mantenimiento y la adición de más proyectos.

El componente Contact

Una de las razones para crear un portafolio de desarrollador es que los clientes potenciales puedan ponerse en contacto contigo. Una forma sería que la gente te enviara un correo electrónico, que es lo que facilitaremos en este componente Contact.

// components/Contact.jsx

const Contact = () => {
  return (
    <div className="contact-container">
      <h2>Get In Touch</h2>
      <p>If you want us to work together, have any questions or want me to speak at your event, my inbox is always open. Whether I just want to say hi, I'll try my best to get back to you! Cheers!</p>
      <a href="mailto:[email protected]" className='cta-btn'>Say Hello</a>
    </div>
  )
}

export default Contact;

Coloca tu dirección de correo electrónico en la etiqueta a para que el botón lance una aplicación de correo electrónico con un mensaje dirigido a ti.

Componente Contact
Componente Contact

Ya has creado con éxito todos los componentes para tu aplicación de portafolio. El siguiente paso sería añadirlos a tu página de índice. Navega hasta el archivo pages/index.js -que se crea por defecto- y sustituye su código por el siguiente.

// pages/index.js

import Hero from '@/components/Hero';
import About from '@/components/About';
import Skills from '@/components/Skills';
import Projects from '@/components/Projects';
import Contact from '@/components/Contact';

import Head from 'next/head';

const Home = () => {
  return (
    <>
      <Head>
        <title>Joel's Portfolio</title>
        <meta name="description" content="Joel's Portfolio" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <div>
        <Hero />
        <About />
        <Skills />
        <Projects />
        <Contact />
      </div>
    </>
  );
};

export default Home;

Cuando ejecutes ahora tu aplicación, observarás que se ha creado un sitio web de portafolio completo. Por último, antes de desplegar tu aplicación, vamos a instalar una dependencia. Una de las ventajas de utilizar Next.js es la gran cantidad de funciones que aporta, como el enrutamiento basado en archivos, la optimización de imágenes y muchas más.

La optimización de imágenes se gestiona con el componente Next.js Image. Antes de desplegar una aplicación en producción que utilice el componente Imagen de Next.js, se recomienda encarecidamente que instales sharp. Puedes hacerlo navegando a tu terminal, asegurándote de que estás en el directorio de tu proyecto, y ejecutando el siguiente comando:

npm i sharp

Ahora puedes desplegar tu aplicación, y las imágenes funcionarán correctamente con toda la optimización que proporciona Next.js.

Cómo Desplegar la aplicación Next.js en Kinsta

Una vez que estés contento con tu portafolio mostrando tus mejores trabajos de desarrollo e información clave, es probable que quieras compartirlo con los demás, ¿verdad? Veamos cómo hacerlo utilizando GitHub y la plataforma de Alojamiento de Aplicaciones de Kinsta.

Envía tu código a GitHub

Hay varias formas de enviar códigos a GitHub, pero vamos a utilizar Git para este tutorial. Git es ampliamente utilizado en el desarrollo de software porque proporciona una forma fiable y eficiente de gestionar los cambios de código, colaborar en proyectos y mantener el historial de versiones.

Puedes subir tu código a GitHub siguiendo estos pasos:

Primero, crea un nuevo repositorio (igual que una carpeta local para almacenar tu código). Puedes hacerlo accediendo a tu cuenta de GitHub, haciendo clic en el botón + de la esquina superior derecha de la pantalla y seleccionando Nuevo repositorio en el menú desplegable, como se ve en la imagen siguiente.

Crea un nuevo repositorio de GitHub.
Crea un nuevo repositorio de GitHub.

El siguiente paso sería dar un nombre a tu repositorio, añadir una descripción (opcional) y seleccionar si quieres que tu repositorio sea público o privado. A continuación, haz clic en Crear repositorio. Ya puedes enviar tu código al nuevo repositorio de GitHub.

Todo lo que se necesita para empujar tu código con Git es la URL del repositorio, que puedes encontrar en la página principal del repositorio, bajo el botón Clonar o descargar, o en los pasos que aparecen después de crear un repositorio.

Accede a la URL de tu repositorio GitHub
Accede a la URL de tu repositorio GitHub

Puedes prepararte para envíar tu código abriendo tu terminal o símbolo del sistema y navegando hasta el directorio que contiene tu proyecto. Utiliza el siguiente comando para inicializar un repositorio Git local:

git init

Ahora añade tu código al repositorio Git local utilizando el siguiente comando:

git add .

El comando anterior añade todos los archivos del directorio actual y sus subdirectorios al nuevo repositorio Git. Ahora puedes confirmar tus cambios utilizando el siguiente comando:

git commit -m "my first commit"

Nota: Puedes sustituir «mi primera confirmación» por tu propio mensaje breve que describa los cambios realizados.

Por último, envía tu código a GitHub utilizando los siguientes comandos:


git remote add origin [repository URL]
git push -u origin master

Nota: Asegúrate de sustituir «[URL del repositorio]» por la URL de tu propio repositorio de GitHub.

Una vez que hayas completado estos pasos, tu código será enviado a GitHub y accesible a través de la URL de tu repositorio. Ahora puedes desplegar tu repositorio en Kinsta.

Despliega tu Portafolio en Kinsta

El despliegue en Kinsta se realiza en cuestión de minutos. Comienza en el panel de control MyKinsta para iniciar sesión o crear tu cuenta.

A continuación, autorizarás a Kinsta en GitHub en estos rápidos pasos:

  1. Haz clic en Aplicaciones en la barra lateral izquierda
  2. Haz clic en Añadir servicio
  3. En el menú desplegable, haz clic en Aplicación porque quieres desplegar una aplicación Next.js en Kinsta.
Crea un proyecto de aplicación en MyKinsta
Crea un proyecto de aplicación en MyKinsta

Aparecerá un modal a través del cual podrás seleccionar el repositorio que deseas desplegar.

Si tienes varias ramas en tu repositorio, puedes seleccionar la que deseas desplegar. También puedes asignar un nombre a esta aplicación. Asegúrate de seleccionar una ubicación de centro de datos entre las disponibles en 25, y entonces Kinsta detectará automáticamente un comando de inicio.

Detectar automáticamente el comando de inicio
Detectar automáticamente el comando de inicio

En este momento, tu aplicación comenzará a desplegarse. En unos minutos, se proporcionará un enlace para acceder a la versión desplegada de tu aplicación. En este caso, es: https://kinsta-developer-portfolio-ir8w8.kinsta.app/

Enlace de despliegue en Kinsta
Enlace de despliegue en Kinsta

Nota: Se ha activado el despliegue automático, por lo que Kinsta vuelve a desplegar automáticamente tu aplicación cada vez que realizas cambios en tu código base y lo envías a GitHub.

Resumen

Hay varias razones por las que los desarrolladores deberían considerar el uso de Next.js para sus proyectos web. En primer lugar, proporciona un rendimiento optimizado desde el primer momento, con funciones como la precarga y la división del código que ayudan a reducir los tiempos de carga de las páginas. En segundo lugar, proporciona una experiencia de desarrollo familiar para los desarrolladores de React, ya que admite herramientas populares como los componentes con estilo y las últimas funciones de React.

Kinsta admite varias opciones de despliegue para Next.js, incluido el alojamiento tradicional basado en servidor y las modernas plataformas sin servidor. Esto permite a los desarrolladores elegir la opción de despliegue que mejor se adapte a sus necesidades, al tiempo que se benefician de las optimizaciones de rendimiento del framework y de otras ventajas.

En este tutorial, has aprendido paso a paso cómo construir un sitio de portafolio responsivo utilizando Next.js y luego desplegarlo en Kinsta.

Puedes probar gratis el Alojamiento de Aplicaciones de Kinsta y, si te gusta, optar por nuestro plan Nivel Hobby a partir de 7 dólares/mes.

Ahora te toca a ti desafiarte a ti mismo: ¡añade más funciones a tu sitio web de portafolio recién desarrollado! Aquí tienes algunas ideas para que fluya tu creatividad: añade más páginas con información detallada, integra un blog con MDX, implementa alguna animación. Comparte tus proyectos y experiencias en los comentarios de abajo

Joel Olawanle Kinsta

Joel es un desarrollador Frontend que trabaja en Kinsta como Editor Técnico. Es un formador apasionado enamorado del código abierto y ha escrito más de 200 artículos técnicos, principalmente sobre JavaScript y sus frameworks.