在 Next.js 应用里可以通过 process.env 使用环境变量，比如在环境变量文件里定义的环境变量。

应用需要的一些配置可以放在环境变量里，默认的环境变量可以放在 .env 这个文件里定义，新建一个文件，名字叫 .env ，如果想定义公开的环境变量，环境变量的名字里要带着 NEXT_PUBLIC_ 前缀，这种环境变量的值在编译应用的时候会被替换成实际的值。

如果环境变量是在 Node 环境里使用的，可以不用加 NEXT_PUBLIC_ 前缀。

添加一个 NEXT_PUBLIC_NAME，等号右边是给它设置的值，比如 宁皓网。在应用里可以直接读取环境变量里的值，我们也可以创建一个配置文件，在配置文件里导出需要的配置。新建一个文件，放在 app 的下面，名字是 config.ts。

在文件里 export 一个 appConfig，它是一个对象，里面添加一个 appName，它的值可以用一下 process.env.NEXT_PUBLIC_NAME。注意我们不能用解构的写法解构 process.env，因为它不是一般的对象。

打开 app-header 个组件，把在这个组件里使用的 宁皓网 替换成 appConfig 这个配置对象里的 appName。它对应的值就是环境变量里的 NEXT_PUBLIC_NAME 的值。

在终端，重新启动一下项目的开发服务。

然后在浏览器观察一下，现在页面上显示的宁皓网这几个字现在就会是 NEXT_PUBLIC_NAME 这个环境变量的值。