1. npm init next-app nextjs-blog --example " https://github.com/vercel/next-learn-starter/tree/master/learn-starter "

目录

  • components文件夹:这里是专门放置自己写的组件的，这里的组件不包括页面，指公用的或者有专门用途的组件。
  • node_modules文件夹：Next项目的所有依赖包都在这里，一般我们不会修改和编辑这里的内容。
  • pages文件夹：这里是放置页面的，这里边的内容会自动生成路由，并在服务器端渲染，渲染好后进行数据同步。
  • static文件夹： 这个是静态文件夹，比如项目需要的图片、图标和静态资源都可以放到这里。
  • .gitignore文件： 这个主要是控制git提交和上传文件的，简称就是忽略提交。
  • package.json文件：定义了项目所需要的文件和项目的配置信息（名称、版本和许可证），最主要的是使用npm install 就可以下载项目所需要的所有包。

image.png
在根目录下，创建一个pages文件夹，这个文件夹是Next规定的，在这个文件夹下写入的文件，Next.js会自动创建对应的路由。有了文件夹以后，在文件下面创建一个index.js文件，这就是我们的首页了,然后用React Hooks的写法，写个最简单的Hello World。

  1. export default ()=>{
  2. return (
  3.   <div>hello next.js</div>
  4. )
  5. }