【Rust实战】Axum + Nextjs 前后端全栈开发01：介绍

这个例子展示了如何使用Rust语言搭建一个使用Axum框架的后端API服务器，以及如何使用Next.js框架搭建一个前端应用，并与后端API服务器进行通信。

后端Rust代码（axum\_nextjs\_starter/src/main.rs）:

use axum::{routing::get, Router};
 
#[tokio::main]
async fn main() {
    // 初始化一个axum路由器
    // 添加一个处理GET请求的路由
    // 响应 "Hello, Next.js + Axum!"
    let app = Router::new().route("/", get(|| async { "Hello, Next.js + Axum!" })).layer(axum::middleware::trace::TraceLayer::new());
 
    // 在8080端口启动服务器
    axum::Server::bind(&"0.0.0.0:8080".parse().unwrap())
        .serve(app.into_make_service())
        .await
        .unwrap();
}

前端Next.js代码（pages/index.js）:

import fetch from 'node-fetch';
import { useEffect, useState } from 'react';
 
export default function Home() {
  const [message, setMessage] = useState('');
 
  useEffect(() => {
    fetch('http://localhost:8080')
      .then(res => res.text())
      .then(text => setMessage(text))
      .catch(console.error);
  }, []);
 
  return (
    <div>
      <h1>Next.js + Axum</h1>
      <p>{message}</p>
    </div>
  );
}

这个例子简单展示了如何使用Rust搭建后端服务，并通过API与Next.js前端通信。这是一个入门级的示例，展示了前后端如何交互的基本概念。在实际应用中，你需要考虑更多的安全性、可靠性和性能因素。