next.js（1）初始化项目与git托管

什么是next.js？

• Next.js 是一个基于 React 的框架，用于构建用户界面，特别是 Web 应用和网站。
• 用途: 主要用于前端开发，提供服务器端渲染（SSR）和静态站点生成（SSG）的功能。
• 特点:
  • 简化了 React 应用的服务器端渲染，提高了应用的性能和 SEO 表现。
  • 支持快速开发体验，如热重载和错误报告。
  • 自动进行代码拆分，仅加载必要的页面资源。
  • 提供了内置的 CSS 和 Sass 支持。
  • 支持 TypeScript 和 JSX。
  • 允许定义基于文件系统的路由系统。

初始化next.js项目 

npm create next-app 项目名称 

#命令
npm create next-app D-S-route

#交互配置
√ Would you like to use TypeScript? ... Yes
√ Would you like to use ESLint? ... Yes
√ Would you like to use Tailwind CSS? ... No
√ Would you like to use `src/` directory? ... Yes
√ Would you like to use App Router? (recommended) ... Yes
√ Would you like to customize the default import alias (@/*)? ... Yes
√ What import alias would you like configured? ... @/*


......

Success! Created my-next-app at C:\Desktop\nextjs\D-S-route

学习了动静态路由，有点惊讶到我了，在src下创建pages，pages就是路由器，在pages下的所有页面文件都是路由。

比如pages/posts.tsx，localhost:3000/posts可以访问。

甚至动态路由的文件名可以写成中括号里加query变量。

比如pages/posts/[postId].tsx，当访问 localhost:3000/posts/1 时，使用useRouter()的query可以获取到 postId = 1，有点香。

当然，这只是单个请求参数，还可以使用剩余参数语法，pages/news下创建[...params].jsx，来命名组件(页面)，这样当我访问localhost:3000/news/1/2/3，[...params].jsx 中使用 useRouter()的query的params 可以得到一个数组[1,2,3]。

附上目录结构。

localhost:3000/  --- 对应默认的app/page.tsx文件

localhost:3000/about --- 由于没有找到，所以匹配到了动态路由，且other = 'about'

localhost:3000/posts ---进入posts，但没有query值，默认执行index.tsx

localhost:3000/posts/2/comments/3    如下

进入 posts -> postId=2，进入postId -> 进入 comments -> commentsId=3，执行[commentId].tsx

！！！如果使用单个中括号的动态路由，则访问时没有给到参数，就无法访问到该路由，比如pages/news/[newId].tsx，localhost:3000/news/ 无法访问到。

如果是双中括号的动态路由，比如 pages/news/[[newId]].tsx ，就变成了可选参数的动态路由

localhost:3000/news/ 或者 localhost:3000/news/1，都可以访问该动态路由。

项目部署到github

在github创建项目仓库，我的仓库计划是每个模块的学习项目对应github的一个文件，所以我在nextjs文件夹进行git init，这样所有模块项目都可以放在同一个仓库里

#初始化本地仓库
$ git init 
Initialized empty Git repository in C:/Desktop/nextjs/.git/

注意，如果项目中包含了.git（嵌套.git，称为子系统），即nextjs文件中存在.git，并且nextjs下的D-S-route文件中也存在.git文件，请删除项目中的.git，并且清除缓存，不然 push 到github上会出现白色箭头的文件夹，无法打开

git rm --cached D-S-route/

如果没有子系统，则可直接加入暂存区

#将项目加入到暂存区
$ git add D-S-route/

正常提交

 git commit -m "提交 动静态路由学习项目"

在push之前，请记得拉取远程仓库的最新提交，否则容易冲突。

#从远程仓库 origin 的 main 分支拉取最新的提交
#然后对你的本地 main 分支进行 rebase 操作

$ git pull --rebase origin main

开始将本地仓库的项目 push 到github上

git push origin main

仓库结构如下，后面慢慢push更多模块项目到这里 

print('附上github链接：')

GitHub - xffffffff/next-project: next.js搭建的一个项目

请多多关照，谢谢！！