打算做一个企业官网，因为企业官网肯定要考虑到SEO，虽然原来单页应用主要是用Vue的，但是在SSR领域中，next.js的使用人群肯定要比nuxt.js多，而且刚好也想了解一下react，下面我们就开始一起学习用next.js写一个企业官网吧。

一、技术栈

• next.js
• typescript
• tailwindcss 后面跟着项目再继续添加技术栈，这些是初始化的时候next.js默认的

二、创建一个Next.js应用

打开你的终端窗口，进入你要在其创建应用的目录，然后运行一下命令：

npx create-next-app@latest mmkj

上面的命令中“mmkj”是项目名称, 配置选项全部回车默认

 **Would you like to use** **TypeScript****?** … No / Yes✔ **Would you like to use** **ESLint****?** … No / Yes✔ **Would you like to use** **Tailwind CSS****?** … No / Yes✔ **Would you like to use** **`src/` directory****?** … No / Yes✔ **Would you like to use** **App Router****? (recommended)** … No / Yes✔ **Would you like to customize the default** **import alias** **(@/*)?** … No / Yes

最后得到这样一个目录文件

三、运行开发服务器

现在我们有了一个mmkj的新目录，我们打开vscode，把该项目添加进去。

• 1、在vscode的终端窗口中选择JavaScript调试终端，不知道你们是怎么方便的开启调试模式的呢，可以留言一起分享一下
• 
  
• 2、打开终端后，在mmk目录下运行命令

npm run dev

• 3、运行命令后默认会启动3000端口，浏览器中输入http://localhost:3000/，即可看到运行成功界面
• 
  
• 
  

四、路由

这里我们使用的是官方推荐的App Router。这个路由运行你使用React的最新功能。现在初始的目录结构为

• app
• -layout.tsx
• -page.tsx 顾名思义layout.tsx就是根布局，所有内容都是基于这个根布局之上的。而page.tsx就是主页了。后面需要新增页面的话，则需要在app目录下创建路由名称文件夹，文件夹内再创建page.tsx，只有page.tsx才可以被公开访问，其他的文件都不能被访问，下图中/dashboard/analytics就无法被访问。
• 
  
• 
  

五、提交git（可选）

初始创建项目后，我们可以选择提交代码到git仓库，可以防止代码丢失，也可以做版本管理，协作开发。

• 1、这里我使用的是coding，在coding中创建完代码仓库后得到一个ssh链接,
• 2、在项目目录的终端中运行命令

	git remote add origin 链接 // 链接替换你自己的ssh链接内容	git add .	git commit -m 'init'	git push --set-upstream origin main

• 3、最后可以在coding代码仓库中看到提交的代码了

六、总结

这是不是太简单了一些，别急，下一篇我们正式开始写代码了。