文/林芳老师

上一篇（04）我们跑通了最激动人心的一遍：一句话生成网页，三条命令存进 GitHub，Vercel 点一下，手机就能打开属于你的网址。但兴奋完，很多学员发现一个尴尬问题：那个网页是"光"的——没有导航栏，没有页脚，菜单点不动，孤零零一个页面，不像一个公司官网。

这一篇我们给网站"盖房子"：看懂 Next.js 项目的目录结构，搭好导航栏和页脚，并且让它们搭一次、所有页面自动共用。做完这一篇，网站就从"一个网页"变成"一个有骨架的官网"，后面填多少页面都不会乱。

一、项目文件夹那么多，你只需要认得两个

上一篇做完，项目文件夹里会冒出一大堆看不懂的文件。别慌，林芳老师先给你吃定心丸：这些东西里 90% 你永远不需要手动打开。 你真正要认识的只有两个地方：

文件/文件夹	干什么用	你要不要碰
app 文件夹	放所有页面和公共布局	要，90% 的时间在这里
public 文件夹	放图片、产品目录 PDF、图标等静态文件	要，传图传资料时用
package.json	项目"配料表"，记录用了哪些组件	不用手动改，Codex 会维护
node_modules	工具的工具箱，体积巨大	永远不碰，删了 Codex 能重装
.next 文件夹	系统自动生成的编译缓存	永远不碰
各种配置文件	框架的底层设置	不碰，出问题让 Codex 处理

记住一个原则：看不懂的文件不要双击、不要删除、不要改名。 网站出问题，九成是手痒乱动了系统文件。你只管 app 和 public，其余交给 Codex。

实操 A： 打开项目文件夹找到 app 和 public，让 Codex 用中文解释里面现在各有什么。不用背，混个脸熟即可。

二、网页的"三层结构"：为什么导航栏能只搭一次

理解一个概念，能省掉后面大量返工：一个网页 = 公共骨架 + 页面内容 + 系统设置。

• 公共骨架：导航栏（页面顶部的菜单）和页脚（页面底部的公司信息）。它们的特点是——每个页面都长一样、永远在那。
• 页面内容：每个页面中间不一样的部分，比如"关于我们"的三段话、"产品中心"的产品列表。
• 系统设置：网页标题、语言、字体加载方式，藏在底层，平时看不见。

在 Next.js 里，这个公共骨架有一个专门的文件，叫全局布局（layout）。你只要让 Codex 把导航栏和页脚写进这个布局文件，从此每新建一个页面，导航和页脚会自动出现，不用重复做。 这正是现代框架的聪明之处：模板站是"每个页面抄一份菜单"，改个联系方式要改十几个页面；布局机制是"菜单只有一份，改一处，全站生效"。

三、让 Codex 搭好全站骨架（导航栏 + 页脚）

在 Codex 对话里发下面这段指令（括号里换成你的真实信息）：

"请帮我完善 app 目录下的全局布局文件（layout），搭建全站公共骨架：
1. 顶部导航栏：左侧是公司英文名（你的公司英文名），右侧五个菜单：首页、关于我们、产品中心、常见问题、联系我们，菜单点击跳转到对应页面；
2. 底部页脚：一行公司英文名和一句话定位（比如'专业不锈钢厨具出口商'），一行联系邮箱（你的企业邮箱），最底部一行版权信息，年份自动显示当前年份；
3. 整体风格简洁商务，深藏蓝主色、橙色点缀，手机端导航自动折叠成菜单按钮；
4. 现在除了关于我们页面，其他页面还没建，菜单链接先指向对应路径即可。"

Codex 改好后，运行 npm run dev 本地预览，打开关于我们页面——顶部有导航、底部有页脚，页面缩到手机宽度时，导航自动收成菜单按钮。 颜色字号不满意，直接用中文说"导航栏再高一点""橙色换深一点"，让他改到你满意。

实操 B： 按指令搭好骨架，本地预览确认关于我们页面顶部、底部都正常。手机端预览：浏览器按 F12，点开发者工具左上角的手机图标，即可切换成手机视图。

四、菜单为什么点不动：一个文件夹就是一个网页

骨架搭好，你马上会遇到第二个问题：点"产品中心""联系我们"打不开——这些页面还不存在。

Next.js 有一个对新手极其友好的规则：app 文件夹里的目录结构，就是网址结构。 一个文件夹对应一个网页：

导航菜单	对应的网址路径	app 里的位置
首页	/	app/page.tsx
关于我们	/about	app/about/page.tsx
产品中心	/products	app/products/page.tsx
常见问题	/faq	app/faq/page.tsx
联系我们	/contact	app/contact/page.tsx

你不用理解代码，记住：菜单要能点开，对应文件夹里就得有页面文件。 现在让 Codex 把缺的页面一次性建好：

"请在 app 目录下创建 products、faq、contact 三个页面文件夹和页面文件，首页 page.tsx 如果不存在也一并创建。每个页面先用统一的占位内容：页面标题加一行'本页面内容将在后续课程完善'，保持和全站一致的导航栏和页脚。"

建好后刷新预览，五个菜单全部能点开、来回跳。内容还是占位的，但网站的"房间格局"已经成型。这一步专业上叫路由，不用记术语，记住"文件夹=网页"就够了。

实操 C： 让 Codex 建好四个占位页，本地把五个菜单挨个点一遍，确认都能打开、导航页脚都在。然后按老规矩 add、commit（说明写"搭建全站骨架与五个页面路由"）、push，Vercel 一两分钟自动重新部署，再用手机打开网址验收。

五、页脚细节：外贸客户判断专业度的第一道题

页脚不是摆设。海外采购商打开供应商网站有个习惯动作：翻到页脚找公司名和邮箱。 信息含糊、邮箱是个人免费邮箱、版权年份停在三年前——这种网站，客户发询盘前心里已经打了折扣。

三个细节务必做到：

第一，版权年份让系统自动更新。 指令里"年份自动显示当前年份"不是可选项。写死 2026，明年网站就显得没人维护；自动取年份，网站永远是"活"的。这是一行设置的事，Codex 一秒搞定。

第二，联系信息全渠道一致。 页脚的公司英文名、邮箱，要和名片、展会目录、开发信落款完全一致。邮箱用企业域名邮箱（带公司域名的那种），不要用个人免费邮箱——这是 B2B 客户判断"这家公司是否正经经营"的硬信号。

第三，页脚从简但不缺项。 公司名、一句话定位、联系邮箱、版权行，四样足够。社媒链接可以放，但前提是那些账号你们真的在运营；荒废的账号链接比不放更减分。

六、本篇三个方法论提示

第一，先有骨架，后有内容。 很多人建站上来就闷头做首页，做了两周发现菜单怎么都理不顺。正确顺序是先定"网站有几个页面、菜单怎么排"，把房子格局定下来，再逐个房间装修。

第二，重复的东西只做一次。 导航、页脚、联系方式这类"每页都有"的内容，一定放进全局布局，而不是每个页面各写一份。今天少写五遍，明天改联系方式时就少改五处——能复用的东西不复制，这是建站和做销售SOP共通的原则。

第三，用客户的设备验收。 客户第一次访问 70% 以上发生在手机上。每做完一块内容，切到手机视图看一眼：菜单能不能展开、文字会不会挤成一团、按钮好不好点。电脑上好看不算数，手机上能用才算数。

课后作业

1. Codex 搭好全局布局：导航栏五个菜单加页脚四要素，本地预览正常。
2. products、faq、contact 三个占位页建好，首页存在，五个菜单全部能点开跳转。
3. 页脚版权年份为自动更新（可让 Codex 告诉你怎么验证），联系邮箱为企业邮箱。
4. 代码提交并 push，手机打开线上网址，五个菜单挨个点一遍——这是你的第一版"成型官网"，截图存进作业文件夹。

卡住的地方老规矩：报错原文发给 Codex，20 分钟解决不了先换网络再试。

下一篇（06），我们给骨架穿上"公司制服"：网站配色、字体、logo 和浏览器标签页上的小图标（favicon）怎么定、怎么让 Codex 一次应用全站——客户打开网站一眼就知道是你，而不是一张谁都能用的模板脸。关注本系列，外贸 AI 建站 18 篇，一篇一篇带你走完从定位到上线的全过程。

本系列基于外贸圈集团《AI建站手册》（GitHub + Next.js + Codex 篇），面向零基础外贸人，不讲代码原理，只带你把能获客的网站亲手做出来。

关于作者

林芳老师，国际商法硕士，外贸圈集团创始人，销售SOP方法论与战略成交方法论创始人，100家亿级企业战略顾问，10余年外贸辅导经验，帮助5000多家企业完成销售体系落地，著有《销售SOP》（中国铁道出版社）。外贸圈集团专注为年出口额1.5亿元以下的B2B外贸企业提供销售体系建设与GEO优化服务，覆盖培训、SOP搭建与陪跑全链路。