一、第一个NextJS工程

最新推荐文章于 2024-07-05 10:38:58 发布

ArslanRobot

最新推荐文章于 2024-07-05 10:38:58 发布

阅读量291

点赞数 2

分类专栏： NextJS开发教程文章标签： react.js

本文链接：https://blog.csdn.net/zhbzhb324/article/details/133606281

版权

NextJS开发教程专栏收录该内容

25 篇文章 4 订阅

订阅专栏

文章介绍了Next.js的基本概念，特别是其服务器端渲染解决方案，用于提升SEO。还讲解了如何使用TailwindCSS和Shadcn/ui组件库，以及新版本Next.js的路由机制，包括AppRouter的使用和多层级布局示例。

摘要由CSDN通过智能技术生成

一、初识NextJS

1、NextJS简介

Next.js 是一款基于 React 框架的轻量级服务端渲染框架，支持csr、ssr、isr、ssg等渲染方式。

2、服务器端渲染

服务器端渲染主要解决的问题还是搜索引擎的seo优化问题。如果你要开发的是一款博客、论坛之类提供资讯、文章的软件系统你就不得不考虑seo问题，搜索引擎本质是爬虫请求网页链接，获取服务器端返回的页面数据后以一定规则剔除标签和脚本、样式等干扰信息，解析其中有效文字内容、超链接等(对于其中的超链接依据算法会决定是否继续进入深一层请求，重复上述处理)，分析后的数据，搜索引擎会决定是否收录。

像vue、react之类打包发布的工程，页面返回的只剩下一个近乎空白的html页面以及js、css链接，对于seo来说有效的也就只有title和meta标签中内容了，这种工程核心数据通常都是js异步请求接口返回的，seo如果去分析js运行逻辑再模拟各种接口请求获取返回信息，太复杂会大量浪费系统资源，得不偿失，相信通常情况下搜索引擎不会去这么干。

为了解决上述问题服务器端渲染又重新回到大众视野，为什么说“又重新回到”，因为在十几年前服务器端渲染几乎是唯一做web开发的架构方式，在ajax还没有成为主流的时代，所有数据都是在服务器端生成，做个文章翻页都是一种折磨。全靠跳转链接得到新数据，跳转后再用各种页面标签解析数据，类似jstl/el表达式之类动态页面标签技术，若干年后富客户端盛行，再发展慢慢变成了vue、react这种打包工程，但是技术的发展却和seo的运行机理背道而驰。一些需要考虑seo的产品需求，逼得开发人员不得不继续沿用html、jquery、bootstrap这种传统方式开发内容系统。Next.js的服务器端渲染解决了这个棘手问题，当页面启用了服务器端渲染，使用浏览器的查看源码功能，可以在源码中搜索到文章标题、链接等标签内容，因此seo也就可以分析返回内容进行收录了。后续我们将进一步介绍服务器端渲染的细节原理。

3、准备工作

本文基于next.js 13版本构建，你的机器需要安装Node.js 16.14或更新的版本。

4、新建工程

zhb@bindeMacBook-Pro next_pro % npx create-next-app@latest my-app --typescript --tailwind --eslint

选项参考

✔ Would you like to use `src/` directory? … Yes
# 增加src源码文件夹，源码结构会清晰一些，也可以不加这一层级
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to customize the default import alias? … No
Creating a new Next.js app in /Users/binzhu/dev/next_pro/next-bbs.

5、默认启动页

当app/page.tsx文件存在时，此页面将作为 http://localhost:3000 的默认启动页面

6、启动运行

cd my-app
npm run dev

7、页面效果

浏览器中访问：http://localhost:3000

二、安装组件库

1、tailwind css简介

与bootstrap功能类似，省去手写css样式属性的烦恼，把样式属性封装成了class，多个class可以自由组合实现页面效果。更重要的还是提供响应式支持。创建工程时已经选择了安装tailwindcss所以这里不需要再单独安装。

2、shadcn/ui

(1) 介绍

基于radix-ui和tailwindcss构建的组件库，与以往组件库的最大区别，shadcn/ui不是以npm方式发布的组件库，而是以类似源码方式下载组件，组件核心功能引用radix-ui，但是对于可自定义修改部分例如样式等属性都暴漏在组件源码中，方便使用者自定义修改。以往发布式组件修改组件风格的方式很有限通常只能改颜色风格，shadcn/ui则灵活很多。同时大部分组件也支持服务器端渲染。打包体积更小，更加轻量化。

(2) 初始化

zhb@bindeMacBook-Pro next-bbs % npx shadcn-ui@latest init

Need to install the following packages:
  shadcn-ui@0.4.0
Ok to proceed? (y) y
✔ Would you like to use TypeScript (recommended)? … yes
✔ Which style would you like to use? › Default
✔ Which color would you like to use as base color? › Slate
✔ Where is your global CSS file? … app/globals.css
# 如果创建工程时选择了use `src/` directory? … Yes这里要改成src/app/globals.css
✔ Would you like to use CSS variables for colors? … yes
✔ Where is your tailwind.config.js located? … tailwind.config.js
✔ Configure the import alias for components: … @/components
✔ Configure the import alias for utils: … @/lib/utils
✔ Are you using React Server Components? … yes
✔ Write configuration to components.json. Proceed? … yes

(3) 添加单个组件

npx shadcn-ui add [component]
# 示例
npx shadcn-ui add button

(4) 导入所有组件

通常按需单个组件导入即可，没有必要一次导入全部

npx shadcn-ui add

(5) 目录结构

三、安装图标库

npm install lucide

四、最简单的路由示例

新版本的nextjs支持两种路由，原先的Pages Router，以及新增的App Router，我们工程里都使用的App Router来做示例。App Router中文件夹层级目录即为访问链接层级路径。

1、路由示例目录结构

2、默认访问页示例

app/layout.tsx

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        <div>src/app/layout.tsx框架</div>
        {children}
      </body>
    </html>
  )
}

app/page.tsx

export default function Home() {
  return (
    <div>Page Root</div>
  )
}

访问地址：http://localhost:3000

页面输出结果如下：

src/app/layout.tsx框架
Page Root

3、第二层级页面(无二级定义layout.tsx)

app/page1/page.tsx

export default function Page1() {
  return (
    <div>Page1</div> 
  )
}

访问地址：http://localhost:3000/page1

页面输出结果如下：

src/app/layout.tsx框架
Page1

4、第二层级页面(存在二级定义layout.tsx)

（1）作用

如果子文件目录中存在layout.tsx文件，会逐级叠加页面内容

（2）页面代码

app/page2/layout.tsx

export default function Page2Layout({
  children,
}: {
  children: React.ReactNode
}) { 
  return (
    <>
      <div>src/app/page2/layout.tsx框架</div>
      {children}
    </>
  )
}

app/page2/page.tsx

export default function Page2() {
  return (
    <div>page2</div> 
  )
}

访问地址：http://localhost:3000/page2

页面输出结果如下：

src/app/layout.tsx框架
src/app/page2/layout.tsx框架
page2

5、第三层级页面

app/page2/page3/page.tsx

export default function Page2() {
  return (
    <div>page2</div> 
  )
}

访问地址：http://localhost:3000/page2/page3

页面输出结果如下：

src/app/layout.tsx框架
src/app/page2/layout.tsx框架
page3

实际工程中更多的还是会使用到多个根布局的结构，比如工程内既有用户入口页面，又存在管理后台入口等情况，后续示例中将以multiple root layouts来构建。

ArslanRobot

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录