Next.js 应用程序路由器：示例与实践

在学习 Next.js 应用程序路由器的过程中，实践是非常重要的一环。通过实际操作和示例，你可以更好地理解和掌握其功能和用法。以下是一些实践建议和示例，帮助你深入学习。

实践建议

动手实践：不要只是阅读文档和示例代码，实际动手编写代码。创建一个新项目，尝试实现不同的功能，如数据获取、路由切换等。

理解核心概念：确保你理解了 Next.js 的核心概念，如服务器端渲染、客户端导航、数据获取等。这些概念是掌握应用程序路由器的基础。

参考官方示例：Next.js 官方文档提供了许多示例，尝试运行这些示例，并根据需要进行修改和扩展。

解决实际问题：在学习过程中，尝试解决实际问题，如如何实现一个带有动态路由的博客系统，如何处理表单提交等。

参与社区讨论：加入 Next.js 社区，与其他开发者交流学习经验，解决遇到的问题。

示例：创建一个简单的博客应用

以下是一个使用 Next.js 应用程序路由器创建简单博客应用的示例。

项目结构

my-app/
  ├─ app/
  │  ├─ blog/
  │  │  ├─ page.js
  │  │  ├─ [slug]/page.js
  │  ├─ layout.js
  ├─ public/
  ├─ package.json

实现

根布局（app/layout.js）：

export default function RootLayout({ children }) {
  return (
    <html lang="zh">
      <body>
        <nav>
          <a href="/">编程狮首页</a>
          <a href="/blog">编程狮博客</a>
        </nav>
        {children}
      </body>
    </html>
  );
}

博客列表页面（app/blog/page.js）：

export default async function BlogPage() {
  // 模拟数据获取
  const posts = await fetch('https://api.example.com/posts').then(res => res.json());


  return (
    <div>
      <h1>编程狮博客列表</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>
            <a href={`/blog/${post.slug}`}>{post.title}</a>
          </li>
        ))}
      </ul>
    </div>
  );
}

博客详情页面（app/blog/[slug]/page.js）：

export default async function BlogPostPage({ params }) {
  // 从 params 中获取 slug
  const { slug } = params;


  // 模拟数据获取
  const post = await fetch(`https://api.example.com/posts/${slug}`).then(res => res.json());


  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

示例：处理表单提交

以下是一个使用 Next.js 应用程序路由器处理表单提交的示例。

表单页面（`app/contact/page.js`）：

export default function ContactPage() {
  async function handleSubmit(formData) {
    // 处理表单数据
    const response = await fetch('/api/send-email', {
      method: 'POST',
      body: JSON.stringify(Object.fromEntries(formData)),
    });


    if (!response.ok) {
      throw new Error('表单提交失败');
    }


    return { message: '表单提交成功' };
  }


  return (
    <form action={handleSubmit}>
      <label htmlFor="name">姓名：</label>
      <input type="text" id="name" name="name" required />


      <label htmlFor="email">邮箱：</label>
      <input type="email" id="email" name="email" required />


      <label htmlFor="message">消息：</label>
      <textarea id="message" name="message" required />


      <button type="submit">提交</button>
    </form>
  );
}

通过以上示例和实践建议，你可以更好地理解和掌握 Next.js 应用程序路由器的使用方法。不断实践和探索，你将能够构建出功能强大的应用程序。

Next.js 应用程序路由器：示例与实践

实践建议

示例：创建一个简单的博客应用

项目结构

实现

示例：处理表单提交

表单页面（app/contact/page.js）：

推荐文章

推荐教程

推荐课程

表单页面（`app/contact/page.js`）：