Upgrading from apollo-server-micro to apollo server 4

Question

I know this might be an easy task but, I am not understanding the documentation on how to migrate to apollo server 4 . I am currently using Next JS as a framework. I am not using express. I am aiming for a serverless framework

this is my current configuration

Pages/api/index.js

import Cors from "micro-cors";
import ApolloServer from "../../apollo/config/server";

const cors = Cors();

export const config = {
  api: {
    bodyParser: false,
  },
};

const serverStarted = ApolloServer.start();

export default cors(async (req, res) => {
  if (req.method === "OPTIONS") {
    res.end();
    return false;
  }

  await serverStarted;
  await ApolloServer.createHandler({
    path: "/api",
  })(req, res);
});

As for the server file imported

server.js

import { ApolloServer } from "apollo-server-micro";
import schema from "./schema";
import resolvers from "./resolvers";
import { context } from "./context";
import { ApolloServerPluginLandingPageDisabled } from "apollo-server-core";
const typeDefs = schema;

export default new ApolloServer({
  typeDefs,
  resolvers,
  context,
  csrfPrevention: true,
  cache: "bounded",
  plugins: [ApolloServerPluginLandingPageDisabled()],
});

Answer 1

As Watson from the Apollo team shared, and @DanCrews mentioned there is this integration as-integrations/next

this would go in Pages/api/index.js

import { ApolloServer } from "@apollo/server";
import { ApolloServerPluginLandingPageDisabled } from '@apollo/server/plugin/disabled';
import { startServerAndCreateNextHandler } from "@as-integrations/next";
const server = new ApolloServer({
  resolvers,
  typeDefs,
  csrfPrevention: true,
  cache: "bounded",
  plugins: [ApolloServerPluginLandingPageDisabled()],
});
const handler = startServerAndCreateNextHandler(server, { context });
export default handler;

and there would be no need of an server.js file