Tutorial: Primeros pasos con Nextjs — 4. Creando el proyecto en Nextjs

00:00 / 00:00

4. Creando el proyecto en Nextjs

Para crear el proyecto con Nextjs, vamos a arrancar desde cero.

Lo primero, utlizamos el CLI de Nextjs para crear la estructura del proyecto:

npx create-next-app@latest

Le damos como nombre al proyecto "myblog" y vamos a elegir las siguientes opciones para una configuración básica:

Would you like to use TypeScript? » Yes
Would you like to use ESLint? » No (lo podemos añadir después)
Would you like to use Tailwind CSS? » No
Would you like your code inside a src/ directory? » Si
Would you like to use App Router? (recommended) » Si (esta es la versión más reciente de Nextjs y la que se recomienda usar)
Would you like to use Turbopack for next dev? » No (esto es un nuevo empaquetador de Nextjs, pero todavía no está listo para producción)
Would you like to customize the import alias (@/* by default)? » No (No vamos a usar alias por ahora, pero se puede añadir después)

Ahora entramos en la carpeta del proyecto (lo ideal es abrir la carpeta nueva desde VSCode).

Arrancamos el proyecto y vemos que funciona.

npm run dev

Abrimos el navegador y navegamos a la ruta "locahost:3000" y vemos que se muestra la página de ejemplo.

Para estar más cómodos, voy a abrir el proyecto en VSCode, directamente desde la carpeta que se ha creado.

Limpiando

Y, ya que estamos, borramos los ficheros que no necesitamos:

La carpeta ./public
./src/app/favicon.ico
./src/app/page.module.css

y en ./src/app/page.tsx actualizamos:

./src/app/page.tsx

- import Image from "next/image";
- import styles from "./page.module.css";

export default function Home() {
  return (
-   <div className={styles.page}>
-     <main className={styles.main}>
-       <Image
-         className={styles.logo}
-         src="/next.svg"
-         alt="Next.js logo"
-         width={180}
-         height={38}
-         priority
-       />
-       <ol>
-         <li>
-           Get started by editing <code>src/app/page.tsx</code>.
-         </li>
-         <li>Save and see your changes instantly.</li>
-       </ol>
--       <div className={styles.ctas}>
-         <a
-           className={styles.primary}
-           href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-           target="_blank"
-           rel="noopener noreferrer"
-         >
-           <Image
-             className={styles.logo}
-             src="/vercel.svg"
-             alt="Vercel logomark"
-             width={20}
-             height={20}
-           />
-           Deploy now
-         </a>
-         <a
-           href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-           target="_blank"
-           rel="noopener noreferrer"
-           className={styles.secondary}
-         >
-           Read our docs
-         </a>
-       </div>
-     </main>
-     <footer className={styles.footer}>
-       <a
-         href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-         target="_blank"
-         rel="noopener noreferrer"
-       >
-         <Image
-           aria-hidden
-           src="/file.svg"
-           alt="File icon"
-           width={16}
-           height={16}
-         />
-         Learn
-       </a>
-       <a
-         href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-         target="_blank"
-         rel="noopener noreferrer"
-       >
-         <Image
-           aria-hidden
-           src="/window.svg"
-           alt="Window icon"
-           width={16}
-           height={16}
-         />
-         Examples
-       </a>
-       <a
-         href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-         target="_blank"
-         rel="noopener noreferrer"
-       >
-         <Image
-           aria-hidden
-           src="/globe.svg"
-           alt="Globe icon"
-           width={16}
-           height={16}
-         />
-         Go to nextjs.org →
-       </a>
-     </footer>
-   </div>
+   <h1>Hello Blog!</h1>
  );
}

Ya estamos listos para empezar a crear nuestro blog.