Nextjs基础 -走向全栈

开发过项目吗？我告诉你，开发项目得建立数据库，获取数据、解析，处理数据并发送到前端，前端对数据进行加工，展示，购买域名、服务器并备案，最后上线。上线后用的人多了就添加广告。购买服务器的钱自掏腰包，广告的钱三七分成。*怎么才七成？*七成，七成是人家的，能得三成还得看后端的脸色。

来，我好不容易考上大学，学了四年，毕业当了前端，要做一个项目，我得请后端。还得买服务器、买域名。还得看他妈的脸色。我不成跪着要饭的了。

要这么说，当前端还真就是跪着要饭的。就这，多少人想跪还没这门子呢！

…………

*这个（react）能不能挣钱？*能挣，跪着。*这个（node）能不能挣钱？*能挣，山里。

这个（react）加这个（node）能不能站着把钱挣了。

Next Js 是如何定义的

The React Framework for the Web

Used by some of the world's largest companies, Next.js enables you to create full-stack Web applications by extending the latest React features, and integrating powerful Rust-based JavaScript tooling for the fastest builds.

这是官网对他的定义，一个基于web的react框架。也就是说，如过你是一个reacter，那么你可以无缝切换到Next来构建你的全栈web应用。

不得不提的Node Js

既然你看到这篇文章，我默认你了解Node ，可能你并不了解Node的底层原理，不了解Node环境的架构，但这并不影响去使用它。很多时候我觉得工具就像冰箱，虽然都是很成熟的东西，但第一件事先得会使用它，再考虑他是如何制造的。

我们用Node做什么？很简单，构建web服务器和连接数据库。

剩下什么事件驱动、非阻塞I/O模型，我们不在这里赘述，以后有可能（如果我用到了），我会单独写一篇文章。

基于这两者，你就可以正式开始全栈的第一步了，让我们看看它是如何帮助你快速的写接口的。

Next Js 和 API Route

Next内置一个node服务器。记得学express的时候刚开始就要学创建服务器，刚开始还很兴奋，三五行代码就能搭建一个node服务器，比node原生api方便多了，现在看next，启动了服务器也随之启动了，简直太方便了。

next通过约定api文件夹下的都是接口的方式，大大降低了写接口文件的方式。

有人觉得它很鸡肋，更多时候还是采用前后端分离的方式，用Next只是将它当作一个To C的框架，（To B还用react）它的存在让更多的前端开发者可以做一些个人项目，降低了个人全栈开发的门槛。如果业务需求并不复杂可以考虑使用Next来处理后端业务。

创建第一个接口

假如你想要获取一个数据，在/api文件夹下创建一个/getdata的文件夹，里面包含一个route.js这个名字一定要写对，一定不要习惯性写成router了

//路径： /api/getdata/route.js
export async function GET(request) {}
//写一个这样的函数就可以了 进行GET请求了

如果你要返回数据

import { NextResponse } from 'next/server'

export async function GET(request) {
	let data = 'hellow next'
    return NextResponse.json({ 
    	code:1,
        msg:"请求成功",
        data,
    })
}

前台请求

const getData = async() =>{
	let data = await fetch("http:..../api/get").then(res=>res.json()).catch(err=>console.log(err))
    return data
}//在服务端，请求的路径一定是绝对路径，客户端可以是相对路径

export default  function Page () {
	let data = await getData()
return <p>{data}</p>
}

此时，你就是获取到服务器传过来的数据了。

注意 fetch请求必须在App路由下

Next 13 如果使用App路由不要使用getStaticProps、getServerSideProps获取资源的方式，如果你在其他地方看到这种方式获取数据，请确认好你是App路由还是Page路由。