Introducción a Next.js 14

tutorialDetail.content.intro-nextjs.s1_code

tutorialDetail.content.intro-nextjs.s2_code

npx create-next-app@latest mi-proyecto
cd mi-proyecto
npm run dev

mi-proyecto/
├── app/
│   ├── layout.tsx      # Layout principal de la aplicacion
│   ├── page.tsx        # Pagina de inicio (ruta /)
│   ├── globals.css     # Estilos globales
│   └── favicon.ico     # Icono del sitio
├── public/             # Archivos estaticos (imagenes, fuentes)
├── next.config.js      # Configuracion de Next.js
├── package.json        # Dependencias del proyecto
├── tailwind.config.ts  # Configuracion de Tailwind CSS
└── tsconfig.json       # Configuracion de TypeScript

// app/about/page.tsx
export default function AboutPage() {
  return (
    <div>
      <h1>Sobre Nosotros</h1>
      <p>Bienvenido a nuestra pagina.</p>
    </div>
  )
}

// app/posts/page.tsx
async function getPosts() {
  const res = await fetch('https://api.example.com/posts')
  return res.json()
}

export default async function PostsPage() {
  const posts = await getPosts()

  return (
    <div>
      <h1>Blog</h1>
      {posts.map((post) => (
        <article key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.excerpt}</p>
        </article>
      ))}
    </div>
  )
}

tutorialDetail.content.intro-nextjs.s7_code

tutorialDetail.content.intro-nextjs.s8_code