从零开始NEXT.js(二)——项目结构和新建页面

从零开始NEXT.js(一)——新建项目

在上一篇中我们下载了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