Introduction to Next.js 14

tutorialDetail.content.intro-nextjs.s1_code

tutorialDetail.content.intro-nextjs.s2_code

npx create-next-app@latest my-project
cd my-project
npm run dev

my-project/
├── app/
│   ├── layout.tsx      # Main application layout
│   ├── page.tsx        # Home page (/ route)
│   ├── globals.css     # Global styles
│   └── favicon.ico     # Site icon
├── public/             # Static files (images, fonts)
├── next.config.js      # Next.js configuration
├── package.json        # Project dependencies
├── tailwind.config.ts  # Tailwind CSS configuration
└── tsconfig.json       # TypeScript configuration

// app/about/page.tsx
export default function AboutPage() {
  return (
    <div>
      <h1>About Us</h1>
      <p>Welcome to our page.</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