2025-01-15 · 3 min read

Getting Started with Next.js 15

#nextjs#react#web-development#tutorial

介绍

Next.js 15 带来了许多令人兴奋的新特性，包括改进的 App Router、更好的性能优化和增强的开发体验。在这篇文章中，我们将深入探讨如何开始使用 Next.js 15 构建你的第一个应用。

为什么选择 Next.js？

Next.js 是一个基于 React 的全栈框架，提供了：

服务端渲染 (SSR)：提升 SEO 和首屏加载速度
静态站点生成 (SSG)：预渲染页面以获得最佳性能
API Routes：轻松构建后端 API
文件系统路由：直观的路由系统
自动代码分割：优化包大小

安装和设置

首先，确保你已经安装了 Node.js 18 或更高版本。然后运行：

bash

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

这将创建一个新的 Next.js 项目，并启动开发服务器。

App Router 基础

Next.js 15 默认使用 App Router，它基于 React Server Components。创建一个新页面非常简单：

tsx

// app/about/page.tsx
export default function About() {
  return (
    <div>
      <h1>About Us</h1>
      <p>This is the about page.</p>
    </div>
  )
}

数据获取

Next.js 提供了多种数据获取方式：

Server Components

tsx

// 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>
      {posts.map((post) => (
        <article key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.content}</p>
        </article>
      ))}
    </div>
  )
}

Client Components

tsx

'use client'

import { useEffect, useState } from 'react'

export default function ClientComponent() {
  const [data, setData] = useState(null)

  useEffect(() => {
    fetch('/api/data')
      .then((res) => res.json())
      .then(setData)
  }, [])

  return <div>{data && <p>{data.message}</p>}</div>
}

样式和主题

Next.js 支持多种样式方案：

CSS Modules：组件级样式
Tailwind CSS：实用优先的 CSS 框架
Styled Components：CSS-in-JS 解决方案
Sass/SCSS：CSS 预处理器

部署

部署 Next.js 应用非常简单：

Vercel（推荐）：一键部署
Netlify：支持 SSR 和 SSG
Docker：容器化部署
自托管：使用 Node.js 服务器

最佳实践

使用 TypeScript：提升代码质量和开发体验
优化图片：使用 next/image 组件
代码分割：利用动态导入
SEO 优化：正确使用 metadata API
性能监控：使用 Web Vitals

总结

Next.js 15 为构建现代 Web 应用提供了强大的工具和最佳实践。通过合理使用其特性，你可以创建高性能、SEO 友好的应用。

开始你的 Next.js 之旅吧！

TypeScript 实用技巧和最佳实践 →

介绍