Next.js 14入门指南：构建现代化Web应用

Next.js 14是React框架的最新版本，带来了许多令人兴奋的新特性和改进。在这篇文章中，我们将探索Next.js 14的核心功能，并学习如何使用它来构建现代化的Web应用。

什么是Next.js？

Next.js是一个基于React的全栈框架，它提供了许多开箱即用的功能，包括：

服务端渲染（SSR）：提升首屏加载速度和SEO表现
静态站点生成（SSG）：在构建时预渲染页面
文件系统路由：基于文件结构自动生成路由
API路由：轻松创建后端API端点
图片优化：自动优化图片加载

App Router：新一代路由系统

Next.js 14引入了全新的App Router，它基于React Server Components构建，带来了更好的性能和开发体验。

基本结构

// app/page.tsx - 首页
export default function Home() {
  return <h1>欢迎来到我的网站</h1>;
}

// app/about/page.tsx - 关于页面
export default function About() {
  return <h1>关于我们</h1>;
}

布局系统

App Router支持嵌套布局，可以在不同层级共享UI：

// app/layout.tsx - 根布局
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="zh-CN">
      <body>
        <nav>导航栏</nav>
        {children}
        <footer>页脚</footer>
      </body>
    </html>
  );
}

Server Components vs Client Components

Next.js 14默认使用Server Components，这意味着组件在服务器端渲染，减少了客户端JavaScript的大小。

Server Components（默认）

// 默认是Server Component
async function BlogPost({ id }: { id: string }) {
  const post = await fetchPost(id);
  return <article>{post.content}</article>;
}

Client Components

当需要使用浏览器API或React hooks时，使用'use client'指令：

'use client';

import { useState } from 'react';

export function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      点击次数: {count}
    </button>
  );
}

数据获取

Next.js 14简化了数据获取的方式：

// Server Component中直接使用async/await
async function Posts() {
  const posts = await fetch('https://api.example.com/posts')
    .then(res => res.json());
  
  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

性能优化

图片优化

使用Next.js的Image组件自动优化图片：

import Image from 'next/image';

export function Avatar() {
  return (
    <Image
      src="/avatar.jpg"
      alt="头像"
      width={200}
      height={200}
      priority
    />
  );
}

字体优化

使用next/font优化字体加载：

import { Inter } from 'next/font/inter';

const inter = Inter({ subsets: ['latin'] });

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN" className={inter.className}>
      <body>{children}</body>
    </html>
  );
}

部署

Next.js应用可以轻松部署到Vercel平台：

将代码推送到GitHub
在Vercel中导入项目
自动构建和部署

也可以导出为静态网站：

# next.config.js
module.exports = {
  output: 'export',
};

# 构建静态网站
npm run build

总结

Next.js 14是构建现代Web应用的强大工具。它的App Router、Server Components和优秀的性能优化功能，让开发者能够轻松构建快速、可扩展的应用程序。

如果你还没有尝试过Next.js，现在是开始的最佳时机！

Next.js 14入门指南：构建现代化Web应用

Next.js 14入门指南：构建现代化Web应用

什么是Next.js？

App Router：新一代路由系统

基本结构

布局系统

Server Components vs Client Components

Server Components（默认）

Client Components

数据获取

性能优化

图片优化

字体优化

部署

总结

相关资源