我用 Nextjs 十分钟搭建了一个展示955公司网站

前言

打工人终极梦想就是能够 955 吧！一年之前看到过955公司名单，最近偶然又看到一篇955不加班的公司名单推文，发现名单上的公司大都是外企，而且相比一年之前又少了几个。于是想将目前还在榜955名单上的公司记录在网站上，一是方便随时查看，二是想看有哪些公司会在什么时候下线，也一并记录下来，做成时间线。

话不多说，先从基本的开始：搭建网站并展示当前在榜955的公司名单。代码开源地址和网站一并放在结尾了。

一、拉取Nextjs 模板

1、使用 create-next-app 脚手架

这是官方脚手架，拉取模板。注意node版本要大于等于18.17.0。

npx create-next-app 955noicu

2、模板文件配置

选择使用TypeScript、Eslint、Tailwind CSS、App Router 模式。

3、等待模板拉取和依赖安装

如图所示就说明安装成功了。

二、获取 955 公司名单数据

1、新建数据文件

新建文件 app/lib/data.ts，用户存储和处理955公司数据。

2、输入数据

数据为模板字符串。

const companylist: string = `Afterpay - 上海
Airbnb - 北京
Amazon - 北京/上海
AMD - 上海
Apple - 北京/上海
ArcSoft - 杭州`

3、数据转换为固定格式

转换为数组，数组子项为对象，包括公司名称和地点属性。

interface Company {
    name: string;
    location: string[];
}

const companies: Company[] = companylist.split('\n').map(line => {
    const [name, location] = line.split(' - ');
    return { name: name.trim(), location: location.trim().split('/') };
});

三、公司名单封装为组件

1、新建组件文件

在app下新建 ui文件夹，用于存储组件；再在ui文件夹下创建app/ui/companylist/index.tsx。

2、编写组件样式和逻辑

每个公司都展示为一个卡片，卡片分别展示公司名称和地点。

采用 grid 布局，能够自适应不同设备屏幕，手机设备每行展示1张卡片，电脑每行展示3张卡片。

export function CompanyList() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      {companies.map((company, index) => (
        <div key={index} className="bg-white p-4 rounded-lg shadow-md">
          <h3 className="text-xl font-semibold mb-2">{company.name}</h3>
          <p className="text-gray-600">
            Locations: {company.location.join(', ')}
          </p>
        </div>
      ))}
    </div>
  );
};

3、组件引入页面

组件引入到app/page.tsx，本项目采用 app 文件夹来区分页面路径，在app 目录下面就为首页。

import { CompanyList } from "./ui/companylist";

export default function Home() {
  return (
    <div className="container mx-auto px-4 py-8">
    <h1 className="text-3xl font-semibold mb-4">Company List</h1>
      <CompanyList />
    </div>
  );
}

4、本地调试预览

执行如下命令。

npm run dev

如图所示说明预览成功

访问本地地址预览效果：

四、部署发布

1、推送到github

新建仓库，将本地仓库关联上新建的远程仓库

git remote add origin git@github.com:xxx
git branch -M master
git push -u origin master

2、vercel 部署

从vercel导入github项目，等待自动部署

3、vercel 配置域名

部署完成，由于国内访问不到 vercel.app域名，需要配置域名，这个时候就得拿出我在某讯云上注册的域名了：955no.icu。在域名管理后台配置域名解析到vercel域名服务器上，等待生效即可。

4、线上网站预览

等待域名服务器生效后，即可在浏览器通过域名线上访问到了。传送门：https://www.955no.icu/

结尾

本文通过使用 create-next-app 脚手架快速生成 Nextjs 模板项目；然后获取并处理 955 公司数据，利用处理后的数据封装为组件引入页面，最后通过vercel免费部署到线上，十分钟内完成 955 公司网站搭建和上线。源码和在线网站都放在下面了。

源码：https://github.com/simonzhangs/955noicu

在线体验：https://www.955no.icu/

---

我的专栏：前端后花园周刊 | 个人建站

这里是松桑的前端后花园，目前坚持在写前端后花园周刊，专注前端基础领域，分享常见前端面试题、前端开源项目、工具库、前端最新动态，目前还一个前端菜鸟，和我一起打怪升级吧！