使用 express api 将 next.js 链接到 mongodb

Question

我刚刚进入 Next.js，但我不知道如何将我的 next.js 应用程序与我的 express api 连接起来。我能够让它工作，但我很确定这不是实现它的正确方法，因为在我的 Index 组件中我硬编码了 fetch url，我知道在生产中如果端口不同它不会工作。

我试图只放置路由，而 fetch API 不允许这样做。

我的索引页面是这样的

import Link from "next/link";
import fetch from "isomorphic-unfetch";

const Index = props => (
  <>
    <h1>Youtubers</h1>
    <ul>
      {props.youtubers.map(youtuber => (
        <li key={youtuber._id}>
          <Link as={`/p/${youtuber._id}`} href={`/post?id=${youtuber.id}`}>
            <a>{youtuber.name}</a>
          </Link>
        </li>
      ))}
    </ul>
  </>
);

Index.getInitialProps = async function() {
  //                this url I think is wrong ↓
  const res = await fetch("https://localhost:5000/youtuber");
  const data = await res.json();

  return {
    youtubers: data.youtubers
  };
};

export default Index;

在我的 server.js 中，我在 app.prepare().then() 中有这个

server.use(bodyParser.urlencoded({ extended: false }));
    server.use(bodyParser.json());

    mongoose.connect(process.env.MONGODB_PASSWORD, {
      useNewUrlParser: true,
      useCreateIndex: true
    });

    mongoose.connection.on("open", function() {
      console.log("mongodb is connected!!");
    });

     mongoose.connection.on(
      "error",
      console.error.bind(console, "MongoDB connection error:")
    );

    //CORS handler
    server.use((req, res, next) => {
      res.header("Access-Control-Allow-Origin", "*");
      res.header(
        "Access-Control-Allow-Headers",
        "Origin, X-Requested-With, Content-Type, Accept, Authorization"
      );
      if (req.method === "OPTIONS") {
        res.header(
          "Access-Control-Allow-Methods",
          "PUT, POST, PATCH, DELETE, GET"
        );
        return res.status(200).json({});
      }
      next();
    });

    //Question Route
    server.use("/youtuber", youtuberRoutes);

    server.get("*", (req, res) => {
      return handle(req, res);
    });

    server.listen(port, err => {
      if (err) throw err;
      console.log(`> Ready on http://localhost:${port}`);
    });

Answer 1

您使用哪个 Nextjs 版本？如果是 v9，您可以使用此 https://nextjs.org/docs#api-middlewares 来提供您的端点。

希望能帮到你。

@Jonney Shih 你可以创建 HOC 并像这样使用它：

import mongoose from 'mongoose'

const withConnect = handler => async (req, res) => {
  if (!mongoose.connection.readyState) {
    const uri = 'mongodb+srv://YOUR-CONNECTION'
    await mongoose.connect(uri, {
      useNewUrlParser: true,
      autoIndex: false
    })
  }

  return handler(req, res)
}

export default withConnect

并在 pages/api/YOUR-ENDPOINT-HERE 中使用它

import withConnect from '../../../../hoc/withConnect'
import YOUR-SCHEMA from '../../../../models/SCHEMA-NAME.schema'

const handler = async (req, res) => {
  // check req method
  if (req.method === 'POST') {
    // Use your schema here e.g:
    const users = await User.find().exec()

    return SOMETHING
  }

  return SOMETHING
}

export default withConnect(handler)

注意：也许您需要像这样检查模型是否存在：

const User: IUserModel = models.User || model('User', userSchema)

玩得开心

Answer 2

我能够让它工作，但我很确定这不是实现它的正确方法，因为在我的索引组件中我硬编码了获取 url，我知道在生产中如果端口不一样它不会工作。

要使 url 动态化以便在开发和生产中工作，您可以在 _app.js getInitialProps 中捕获完整的 url，然后将其传递到索引组件的 getInitialProps 中以供使用。

_app.js

import get from 'lodash/get';

...

static async getInitialProps({ Component, ctx }) {
    const serverUrl = ctx.req ? `${ctx.req.protocol}://${ctx.req.get('Host')}` : '';

...

   if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps({ serverUrl });
    }

   return { pageProps };
}

...

index.js

...

static async getInitialProps({ serverUrl }) {
    const res = await fetch((`${serverUrl}/youtuber`);

...