next.js 页面（pages）——迹忆客-ag捕鱼王app官网

什么是 next.js 页面 - pages

在 next.js 中，一个 page（页面） 就是一个从 .js 、 .jsx 、 .ts 或 .tsx 文件导出（export）的 react 组件 ，这些文件存放在 pages 目录下。每个 page（页面）都使用其文件名作为路由（route）。例如：

• pages/index.js 与 '/' 路由链接。
• pages/posts/first.js 与 '/posts/first' 路由等相关联。

让我们修改在next.js 安装一节中创建的 nextjs 项目。

创建 post 目录并在其中新建 first.js 文件，内容如下：

first.js

export default function firstpost() {
   return 
}

添加链接支持从而使其可以返回ag捕鱼王app官网主页。 更新 first.js 如下

first.js

import link from 'next/link'
export default function firstpost() {
   return (
      <>
         
         
            
   )
}

将链接添加到ag捕鱼王app官网主页从而可以使其导航到第一页。 更新 index.js 如下

index.js

import link from 'next/link'
function homepage() {
   return (
      <>
         
welcome to 迹忆客 - next.js 中文教程!
         
      
   )
}
export default homepage

运行以下命令开启服务。

$ npm run dev

在浏览器中打开 localhost:3000 ，我们将看到以下输出。

单击链接 first post，您将看到以下输出。