文/林芳老师上一篇04我们跑通了最激动人心的一遍一句话生成网页三条命令存进 GitHubVercel 点一下手机就能打开属于你的网址。但兴奋完很多学员发现一个尴尬问题那个网页是光的——没有导航栏没有页脚菜单点不动孤零零一个页面不像一个公司官网。这一篇我们给网站盖房子看懂 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关于我们/aboutapp/about/page.tsx产品中心/productsapp/products/page.tsx常见问题/faqapp/faq/page.tsx联系我们/contactapp/contact/page.tsx你不用理解代码记住菜单要能点开对应文件夹里就得有页面文件。现在让 Codex 把缺的页面一次性建好请在 app 目录下创建 products、faq、contact 三个页面文件夹和页面文件首页 page.tsx 如果不存在也一并创建。每个页面先用统一的占位内容页面标题加一行本页面内容将在后续课程完善保持和全站一致的导航栏和页脚。建好后刷新预览五个菜单全部能点开、来回跳。内容还是占位的但网站的房间格局已经成型。这一步专业上叫路由不用记术语记住文件夹网页就够了。实操 C让 Codex 建好四个占位页本地把五个菜单挨个点一遍确认都能打开、导航页脚都在。然后按老规矩 add、commit说明写搭建全站骨架与五个页面路由、pushVercel 一两分钟自动重新部署再用手机打开网址验收。五、页脚细节外贸客户判断专业度的第一道题页脚不是摆设。海外采购商打开供应商网站有个习惯动作翻到页脚找公司名和邮箱。信息含糊、邮箱是个人免费邮箱、版权年份停在三年前——这种网站客户发询盘前心里已经打了折扣。三个细节务必做到第一版权年份让系统自动更新。指令里年份自动显示当前年份不是可选项。写死 2026明年网站就显得没人维护自动取年份网站永远是活的。这是一行设置的事Codex 一秒搞定。第二联系信息全渠道一致。页脚的公司英文名、邮箱要和名片、展会目录、开发信落款完全一致。邮箱用企业域名邮箱带公司域名的那种不要用个人免费邮箱——这是 B2B 客户判断这家公司是否正经经营的硬信号。第三页脚从简但不缺项。公司名、一句话定位、联系邮箱、版权行四样足够。社媒链接可以放但前提是那些账号你们真的在运营荒废的账号链接比不放更减分。六、本篇三个方法论提示第一先有骨架后有内容。很多人建站上来就闷头做首页做了两周发现菜单怎么都理不顺。正确顺序是先定网站有几个页面、菜单怎么排把房子格局定下来再逐个房间装修。第二重复的东西只做一次。导航、页脚、联系方式这类每页都有的内容一定放进全局布局而不是每个页面各写一份。今天少写五遍明天改联系方式时就少改五处——能复用的东西不复制这是建站和做销售SOP共通的原则。第三用客户的设备验收。客户第一次访问 70% 以上发生在手机上。每做完一块内容切到手机视图看一眼菜单能不能展开、文字会不会挤成一团、按钮好不好点。电脑上好看不算数手机上能用才算数。课后作业Codex 搭好全局布局导航栏五个菜单加页脚四要素本地预览正常。products、faq、contact 三个占位页建好首页存在五个菜单全部能点开跳转。页脚版权年份为自动更新可让 Codex 告诉你怎么验证联系邮箱为企业邮箱。代码提交并 push手机打开线上网址五个菜单挨个点一遍——这是你的第一版成型官网截图存进作业文件夹。卡住的地方老规矩报错原文发给 Codex20 分钟解决不了先换网络再试。下一篇06我们给骨架穿上公司制服网站配色、字体、logo 和浏览器标签页上的小图标favicon怎么定、怎么让 Codex 一次应用全站——客户打开网站一眼就知道是你而不是一张谁都能用的模板脸。关注本系列外贸 AI 建站 18 篇一篇一篇带你走完从定位到上线的全过程。本系列基于外贸圈集团《AI建站手册》GitHub Next.js Codex 篇面向零基础外贸人不讲代码原理只带你把能获客的网站亲手做出来。关于作者林芳外贸圈集团创始人、10倍业绩增长模型创始人法国国际商法硕士15年外贸一线实战与辅导经验累计辅导5000外贸企业、深度服务300工厂著有《外贸销售SOP》中国铁道出版社。外贸圈集团专注为年出口额1.5亿元以下的B2B外贸企业提供销售体系建设与GEO优化服务覆盖培训、SOP搭建与陪跑全链路。