哇！Next.js 继续令人印象深刻

Next.js 9 的最新版本发布让我兴奋不已。它带来了一系列功能，让服务器端 React 变得轻而易举。我知道，当我第一次尝试 Next.js 时，我很快就爱上了它，但有些功能比较笨重，配置起来也很困难。

嗯，我很高兴地说，这次更新提升了标准。我肯定会大加赞赏，但你一定要看看他们介绍最新功能的博客文章。

Zeit 的第 9 版博客文章

简单概述一下——如果您喜欢使用 Typescript，现在原生支持 Typescript。此外，还支持自动静态优化，可以利用服务器端渲染和静态预渲染，让您的网站运行速度飞快。在关注开发者体验的同时，也不要忘记生产环境的改进。

说到开发人员的体验，我想提一下我最喜欢的两个新功能。

首先是 API 路由。您只需/api在 pages 目录中创建一个文件夹。每个端点都是该目录中的一个 JavaScript 文件。使用此功能，您可以轻松构建所需的 API——连接数据库、处理 POST 请求以及使应用正常运行所需的任何其他功能。

您不再需要构建并启动单独的 Express 服务器。令人兴奋的是，端点文件中只需要一个简单的处理函数。这反映了 React 其余部分的函数式组件风格，让我感受到了无缝的体验。

它看起来像这样：

const handler = (req, res) => {
  res.json("message:" "Keep hitting those endpoints baby.")
}

export default handler

Next.js 现已成为完整的软件包，从始至终提供您所需的一切，让您尽可能高效地运行应用。此外，它还新增了一项功能，使创建动态页面变得像使用客户端 React Router 方法一样快速便捷。

在你的 pages 目录中，像这样命名你的文件blog/[postId].js。在你的组件文件中，使用 NextgetInitialProps来获取渲染组件所需的任何数据。

const Post = ({ data }) => {
  return <p>Post: {data.title}</p>
}

Post.getInitialProps = async ({ query }) => {
  const { id } = query
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/posts/${id}`
  )
  const data = await response.json()
  return { data }
}

export default Post

哥们，希望这些更新能让你和我一样兴奋。你知道，所以我才想跟大家分享。我已经开始构思我的下一个项目了（此处双关）。

走出去，创造一些很酷的东西。

注：我与 Zeit 或 Next.js 团队没有任何关系。我只是他们的忠实粉丝！