前言
打工人终极梦想就是能够 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 [email protected]: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
这里是松桑的前端后花园，目前坚持在写前端后花园周刊，专注前端基础领域，分享常见前端面试题、前端开源项目、工具库、前端最新动态，目前还一个前端菜鸟，和我一起打怪升级吧！
标签：app,955,域名,Nextjs,组件,我用,前端,vercel From： https://blog.csdn.net/weixin_43303603/article/details/136963910