介绍

ChatGPT Next Web 是GitHub上一款开源的跨平台 ChatGPT 应用。您可以一键部署你的跨平台私人 ChatGPT 应用。如何在此基础上进行二次开发?在上一章我们已经搭建好ChatGPT Next Web 二次开发环境搭建,本章讲解如何修改网页标题和LOGO。

项目说明

ChatGPT Next Web项目主要开发语言为 TypeScript ,同时,也是基于Next.js框架开发的项目。

Next.js 是一个基于 React 的前端框架,用于构建现代化的、可扩展的 Web 应用程序。它提供了服务器端渲染(SSR)和静态网站生成(SSG)的能力,使得开发人员可以轻松地构建快速、可优化的应用程序。以下是 Next.js 的一些主要特性和优势:

  • 服务器端渲染(SSR):Next.js 支持在服务器端进行渲染,将页面的初始 HTML 内容直接发送给客户端,提供更快的首次加载速度和更好的搜索引擎优化(SEO)。
  • 静态网站生成(SSG):Next.js 可以在构建时生成静态 HTML 页面,这意味着页面在请求之前已经准备好,提供了更快的加载速度和更好的性能。
  • 热模块替换(HMR):Next.js 支持热模块替换,使得在开发过程中可以实时预览和调试代码的变化,提高开发效率。
  • 自动代码拆分:Next.js 可以根据页面的需求自动拆分代码,只加载当前页面所需的代码,减少了初始加载时间和资源消耗。
  • 客户端路由:Next.js 支持客户端路由,可以实现无刷新的页面切换和动态加载组件,提供更好的用户体验。
  • CSS-in-JS 支持:Next.js 内置了对 CSS-in-JS 的支持,可以方便地在组件级别管理样式。
  • 插件生态系统:Next.js 拥有丰富的插件生态系统,可以扩展框架的功能,满足各种需求。

因为Next.js是一个基于 React 的前端框架,所以如果您有兴趣学习Next.js框架,建议先从React学起。这里是一份 React快速入门教程

JavaScript、React和Next.js三者关系可以概括为:React是一个用于构建用户界面的 JavaScript 库,而 Next.js 是建立在 React 之上的一个 React 框架。

React 和 Next.js 的关系可以类比为 React 是一个基础的构建工具,而 Next.js 是在 React 基础上提供了更多高级功能的框架。使用 Next.js 可以更好地利用 React 的能力,并且简化了一些常见的开发任务,使得构建复杂的 Web 应用程序变得更加容易。需要注意的是,Next.js 并不是 React 的替代品,而是一个补充和扩展。你仍然需要了解和掌握 React 的基础知识,才能更好地使用 Next.js。

创建Next.js项目

创建一个新的Next.js项目,有助于我们理解ChatGPT Next Web项目结构。

步骤1:登录上一章创建好的虚拟机(若您还没有虚拟机,可以利用 公有云资源 快速创建,注册后有1个月免费试用)。

1
2
3
#进入/opt目录
root@ubuntu:~# cd /opt
root@ubuntu:/opt#

步骤2:下载Node.js

1
2
3
4
5
6
root@ubuntu:~# cd /opt
root@ubuntu:/opt# wget https://npmmirror.com/mirrors/node/v18.16.0/node-v18.16.0-linux-x64.tar.xz
root@ubuntu:/opt#
root@ubuntu:/opt# ls
node-v18.16.0-linux-x64.tar.xz
#上面表示下载成功

步骤3:安装Node.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
#解压
root@ubuntu:/opt# mkdir -p /usr/local/lib/nodejs
root@ubuntu:/opt# tar -xJvf node-v18.16.0-linux-x64.tar.xz -C /usr/local/lib/nodejs

#添加环境变量
vim ~/.profile
#文件最后添加下面一行
export PATH=/usr/local/lib/nodejs/node-v18.16.0-linux-x64/bin:$PATH

#使环境变量生效
root@ubuntu:/opt# . ~/.profile
#开启yarn
root@ubuntu:/opt# corepack enable

#检查是否安装成功
root@ubuntu:/opt# node -v
v18.16.0
root@ubuntu:/opt# npm version
{
npm: '9.5.1',
node: '18.16.0',
acorn: '8.8.2',
ada: '1.0.4',
ares: '1.19.0',
brotli: '1.0.9',
cldr: '42.0',
icu: '72.1',
llhttp: '6.0.10',
modules: '108',
napi: '8',
nghttp2: '1.52.0',
nghttp3: '0.7.0',
ngtcp2: '0.8.1',
openssl: '3.0.8+quic',
simdutf: '3.2.2',
tz: '2022g',
undici: '5.21.0',
unicode: '15.0',
uv: '1.44.2',
uvwasi: '0.0.15',
v8: '10.2.154.26-node.26',
zlib: '1.2.13'
}
root@ubuntu:/opt# yarn -v
1.22.19
root@ubuntu:/opt# npx -v
9.5.1
root@ubuntu:/opt#

步骤4:创建一个新的Next.js项目,名字叫 my-app,其它选项默认,回车即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
root@ubuntu:/opt# npx create-next-app@latest
Need to install the following packages:
create-next-app@13.4.9
Ok to proceed? (y)
✔ What is your project named? … my-app
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias? … No / Yes
Creating a new Next.js app in /opt/my-app.

Using npm.

Initializing project with template: app-tw


Installing dependencies:
- react
- react-dom
- next
- typescript
- @types/react
- @types/node
- @types/react-dom
- tailwindcss
- postcss
- autoprefixer
- eslint
- eslint-config-next


added 344 packages, and audited 345 packages in 2m

127 packages are looking for funding
run `npm fund` for details

5 moderate severity vulnerabilities

To address all issues, run:
npm audit fix

Run `npm audit` for details.
Initialized a git repository.

Success! Created my-app at /opt/my-app
#上面表示创建成功

Next.js项目结构

我们来看看新的Next.js项目的目录结构。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
#进入项目文件夹
root@ubuntu:/opt# cd my-app
root@ubuntu:/opt/my-app#

#一级文件/目录
root@ubuntu:/opt/my-app# ls -1
app //项目业务逻辑
next.config.js //Next.js 的配置文件
next-env.d.ts //Next.js 的 TypeScript 声明文件
node_modules //node.js模块
package.json //项目信息,包括项目名称、版本、脚本和依赖等
package-lock.json
postcss.config.js
public //静态资源
README.md
tailwind.config.js
tsconfig.json // TypeScript 的配置文件

#app目录下文件
root@ubuntu:/opt/my-app/app# ls -1
favicon.ico //网站图标文件
globals.css
layout.tsx //布局
page.tsx //页

启动项目

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
root@ubuntu:/opt/my-app# npm run dev

> my-app@0.1.0 dev
> next dev

- ready started server on 0.0.0.0:3000, url: http://localhost:3000

- event compiled client and server successfully in 335 ms (20 modules)
- wait compiling...
- event compiled client and server successfully in 355 ms (20 modules)

- wait compiling /page (client and server)...
#上面看到项目启动后监听本机的3000端口


#下面使用指定IP和端口启动项目,例如虚拟机的IP为192.168.0.67
root@ubuntu:/opt/my-app# npm run dev -- --port 3000 --hostname 192.168.0.67

> my-app@0.1.0 dev
> next dev --port 3000 --hostname 192.168.0.67

- ready started server on 192.168.0.67:3000, url: http://192.168.0.67:3000

- event compiled client and server successfully in 423 ms (20 modules)
- wait compiling...
- event compiled client and server successfully in 272 ms (20 modules)

- wait compiling /page (client and server)...
- event compiled client and server successfully in 3.4s (462 modules)
- wait compiling...
- event compiled successfully in 290 ms (226 modules)

使用浏览器访问效果

对一个新的Next.js项目的目录结构了解后,我们来看看ChatGPT Next Web项目的目录结构。可以看到两个项目的结构相差不大。下面开始讲解修改网页标题和LOGO

步骤1:安装项目依赖

1
2
3
4
#进入项目目录,安装项目依赖
root@ubuntu:~#
root@ubuntu:~# cd /opt/ChatGPT-Next-Web
root@ubuntu:/opt/ChatGPT-Next-Web# yarn install

步骤2:修改网页标题,文件位于 app/layout.tsx

1
2
3
4
export const metadata = {
title: "Mystery for AIChat", //网页标题
description: "AI新闻 AI应用 AI教程", //网页描述,用于SEO

步骤3:修改网页LOGO,文件位于 app/layout.tsx,然后将新的图标文件 favicon.ico 上传到目录 public

1
2
3
4
5
6
7
8
9
10
11
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<head>
<meta name="config" content={JSON.stringify(getClientConfig())} />
<link rel="manifest" href="/site.webmanifest"></link>
<link rel="icon" href="/favicon.ico"></link> //添加这一行

查看效果

启动项目看修改后效果

1
2
root@ubuntu:~# cd /opt/ChatGPT-Next-Web/
root@ubuntu:/opt/ChatGPT-Next-Web# npm run dev -- --port 4000 --hostname 192.168.0.67

效果如下图:

小结

通过对Next.js项目结构进行分析,已成功实现ChatGPT Next Web项目修改标题和LOGO。