logoNext.js
DocumentaciónBlogAprender

Pulido del diseño

Hasta ahora, solo hemos añadido código mínimo de React y CSS para ilustrar conceptos como Módulos CSS. Antes de pasar a nuestra próxima lección sobre obtención de datos, vamos a pulir el estilo y el código de nuestra página.

Actualizar components/layout.module.css

Primero, abre components/layout.module.css y reemplaza su contenido con los siguientes estilos más pulidos para el diseño y la foto de perfil:

.container {
  max-width: 36rem;
  padding: 0 1rem;
  margin: 3rem auto 6rem;
}
 
.header {
  display: flex;
  flex-direction: column;
  align-items: center;
}
 
.backToHome {
  margin: 3rem 0 0;
}

Crear styles/utils.module.css

Segundo, creemos un conjunto de clases de utilidad CSS (para estilos de texto) que puedan reutilizarse en múltiples componentes.

Añade un nuevo archivo CSS llamado styles/utils.module.css con el siguiente contenido:

.heading2Xl {
  font-size: 2.5rem;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.05rem;
  margin: 1rem 0;
}
 
.headingXl {
  font-size: 2rem;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: -0.05rem;
  margin: 1rem 0;
}
 
.headingLg {
  font-size: 1.5rem;
  line-height: 1.4;
  margin: 1rem 0;
}
 
.headingMd {
  font-size: 1.2rem;
  line-height: 1.5;
}
 
.borderCircle {
  border-radius: 9999px;
}
 
.colorInherit {
  color: inherit;
}
 
.padding1px {
  padding-top: 1px;
}
 
.list {
  list-style: none;
  padding: 0;
  margin: 0;
}
 
.listItem {
  margin: 0 0 1.25rem;
}
 
.lightText {
  color: #666;
}

Puedes reutilizar estas clases de utilidad en toda tu aplicación, e incluso usar clases de utilidad en tu archivo global.css. Las clases de utilidad se refieren a un enfoque de escritura de selectores CSS más que a un método (ej. estilos globales, módulos CSS, Sass, etc). Aprende más sobre CSS utility-first.

Actualizar components/layout.js

Tercero, abre components/layout.js y reemplaza su contenido con el siguiente código, cambiando Your Name por un nombre real:

import Head from 'next/head';
import Image from 'next/image';
import styles from './layout.module.css';
import utilStyles from '../styles/utils.module.css';
import Link from 'next/link';
 
const name = 'Your Name';
export const siteTitle = 'Next.js Sample Website';
 
export default function Layout({ children, home }) {
  return (
    <div className={styles.container}>
      <Head>
        <link rel="icon" href="/favicon.ico" />
        <meta
          name="description"
          content="Learn how to build a personal website using Next.js"
        />
        <meta
          property="og:image"
          content={`https://og-image.vercel.app/${encodeURI(
            siteTitle,
          )}.png?theme=light&md=0&fontSize=75px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg`}
        />
        <meta name="og:title" content={siteTitle} />
        <meta name="twitter:card" content="summary_large_image" />
      </Head>
      <header className={styles.header}>
        {home ? (
          <>
            <Image
              priority
              src="/images/profile.jpg"
              className={utilStyles.borderCircle}
              height={144}
              width={144}
              alt=""
            />
            <h1 className={utilStyles.heading2Xl}>{name}</h1>
          </>
        ) : (
          <>
            <Link href="/">
              <Image
                priority
                src="/images/profile.jpg"
                className={utilStyles.borderCircle}
                height={108}
                width={108}
                alt=""
              />
            </Link>
            <h2 className={utilStyles.headingLg}>
              <Link href="/" className={utilStyles.colorInherit}>
                {name}
              </Link>
            </h2>
          </>
        )}
      </header>
      <main>{children}</main>
      {!home && (
        <div className={styles.backToHome}>
          <Link href="/">← Back to home</Link>
        </div>
      )}
    </div>
  );
}

Esto es lo nuevo:

  • Etiquetas meta (como og:image), que se usan para describir el contenido de una página
  • Propiedad booleana home que ajustará el tamaño del título y la imagen
  • Enlace "Back to home" al final si home es false
  • Imágenes añadidas con next/image, que se precargan con el atributo priority

Actualizar pages/index.js

Finalmente, actualicemos la página de inicio.

Abre pages/index.js y reemplaza su contenido con:

import Head from 'next/head';
import Layout, { siteTitle } from '../components/layout';
import utilStyles from '../styles/utils.module.css';
 
export default function Home() {
  return (
    <Layout home>
      <Head>
        <title>{siteTitle}</title>
      </Head>
      <section className={utilStyles.headingMd}>
        <p>[Tu presentación personal]</p>
        <p>
          (Este es un sitio web de ejemplo - podrás construir un sitio como este en{' '}
          <a href="https://nextjs.org/learn">nuestro tutorial de Next.js</a>.)
        </p>
      </section>
    </Layout>
  );
}

Luego reemplaza [Tu presentación personal] con tu propia presentación. Aquí hay un ejemplo con el perfil del autor:

Ejemplo

¡Eso es todo! Ahora tenemos el código de diseño pulido y estamos listos para pasar a nuestras lecciones sobre obtención de datos.

Antes de terminar esta lección, hablemos sobre algunas técnicas útiles relacionadas con el soporte de CSS de Next.js en la siguiente página.

Estilos globales

Previous Page

Consejos de Estilos

Next Page

On this page