在上一篇中我们下载了nodejs和NEXT.js的项目框架,这期我们先来大致了解一下项目的结构。
1.项目结构
app----------------------------构建应用程序的位置,所有页面的位置
node_modules-------------------所有库的所在位置
public-------------------------保存静态文件,例如图片,视频,logo等。
package-lock.json--------------可以锁定特定软件包的版本,确保软件包在一个稳定的版本,不会造成最新的软件包可能会奔溃的状况。
next.config.mjs----------------添加日志记录工具,或从外部源获取图像等。
package.json-------------------所有依赖项所在的位置,可以设置特定的运行构建脚本,编译命令等。
postcss.config.mjs-------------css后置文件,一般不使用
tailwind.config.ts-------------tailwind配置文件
tsconfig.json------------------ts配置文件
2.项目启动
在项目的根目录下,我们输入npm run dev来启动项目
npm run dev
去浏览器中访问 http://localhost:3000可以打开网站。
3.新建页面
在app目录下新建一个文件夹about,在about下新建文件page.tsx,添加以下代码。
export default function About(){
return(
<div>
<h1>About</h1>
<p>This is the about page</p>
<Link href={'/'}>Go Back Home</Link>
</div>
)
}
在浏览器中打开http://localhost:3000/about
使用Link组件能让页面连接整个路由系统,实现跳转功能。
动态路由
新建一个名为products的文件夹,再创建一个子文件夹[id],添加以下代码。
export default function page({params}:{params:{id:string}}){
return(
<div>
<h1>Products {params.id}</h1>
</div>
)
}
在浏览器中打开http://localhost:3000/products/1
从零开始NEXT.js(三)——layout.tsx的用法https://blog.csdn.net/Arthus_wyk/article/details/140343737