# @expo/next-adapter 中文文档

规范地址：https://npmcn.com/package/%40expo/next-adapter/

版本：6\.0\.0
npm 元数据更新时间：2026-09-23T11:26:39.194Z
中文译文更新时间：2026-11-14T05:28:31.276Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40expo/next-adapter
原文对照：https://npmcn.com/package/%40expo/next-adapter/?lang=original
项目主页：https://github.com/expo/expo-webpack-integrations/tree/main/packages/next-adapter#readme
源码仓库：https://github.com/expo/expo-webpack-integrations

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：13.7 kB，6 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：expo \>=46，webpack ^4\.46\.0 \|\| ^5\.74\.0，react-native-web ^0\.18 \|\| ^0\.19
- 首次发布：2019-10-15T17:29:12.002Z
- 最新版本发布：2024-01-08T12:32:09.153Z
- 近 30 天下载量：144100（2026-10-14 至 2026-11-12，npm 官方下载统计）
- 已发布版本数：181（近 12 个月 0 个）

## 中文简介

用于使用 Next.js 捆绑 Expo 网页项目的适配器

## 安装

```sh
npm install @expo/next-adapter
```

也可以使用：`pnpm add @expo/next-adapter`、`yarn add @expo/next-adapter`、`bun add @expo/next-adapter`

## README

# 欢迎光临  
`@expo/next-adapter`

使用 React 本地模块的下一个.js 插件

[![](https://flat.badgen.net/npm/dw/@expo/next-adapter)](https://www.npmjs.com/package/@expo/next-adapter)

* * *

> ⚠️ **警告:** 对Next.js的支持是非官方的,而不是一流的博览会特色.

## 设置

### 依赖关系

确保你有 `expo`, (中文(简体) ), `next`, (中文(简体) ), `@expo/next-adapter` 安装在您的工程中.

### 转接

配置转换语言特性的 Next.js :

下一个是Swc (建议)

当使用 SWC 的 Next.js 时,您可以配置 `babel.config.js` 仅用于说明本地人.

```js
// babel.config.js
module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
  };
};
```

你也必须 [强制下一个.js 使用 SWC](https://nextjs.org/docs/messages/swc-disabled) 将以下内容添加到您的 `next.config.js`数字 :

```js
// next.config.js
module.exports = {
  experimental: {
    forceSwcTransforms: true,
  },
};
```
下一个是巴贝尔 (不建议)

调整您的 `babel.config.js` 改为有条件添加 `next/babel` 当与 Web 包捆绑时.

```js
// babel.config.js
module.exports = function (api) {
  // Detect web usage (this may change in the future if Next.js changes the loader)
  const isWeb = api.caller(
    caller =>
      caller && (caller.name === 'babel-loader' || caller.name === 'next-babel-turbo-loader')
  );
  return {
    presets: [
      // Only use next in the browser, it'll break your native project
      isWeb && require('next/babel'),
      'babel-preset-expo',
    ].filter(Boolean),
  };
};
```

### 下一个.js 配置

在您的 `next.config.js`数字 :

```js
const { withExpo } = require('@expo/next-adapter');

module.exports = withExpo({
  // transpilePackages is a Next.js +13.1 feature.
  // older versions can use next-transpile-modules
  transpilePackages: [
    'react-native',
    'expo',
    // Add more React Native / Expo packages here...
  ],
});
```

完全合格的 Next.js 配置可能看起来像:

```js
const { withExpo } = require('@expo/next-adapter');

/** @type {import('next').NextConfig} */
const nextConfig = withExpo({
  reactStrictMode: true,
  swcMinify: true,
  transpilePackages: [
    'react-native',
    'expo',
    // Add more React Native / Expo packages here...
  ],
  experimental: {
    forceSwcTransforms: true,
  },
});

module.exports = nextConfig;
```

### 反应原生网络样式

包裹 `react-native-web` 基于 CSS 样式重置的假设,这里是您如何在 Next.js 中使用 `pages/` 目录.

需求 `pages/_document.js` 文件

```js
import { Children } from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document';
import { AppRegistry } from 'react-native';

// Follows the setup for react-native-web:
// https://necolas.github.io/react-native-web/docs/setup/#root-element
// Plus additional React Native scroll and text parity styles for various
// browsers.
// Force Next-generated DOM elements to fill their parent's height
const style = `
html, body, #__next {
  -webkit-overflow-scrolling: touch;
}
#__next {
  display: flex;
  flex-direction: column;
  height: 100%;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  /* Allows you to scroll below the viewport; default value is visible */
  overflow-y: auto;
  overscroll-behavior-y: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -ms-overflow-style: scrollbar;
}
`;

export default class MyDocument extends Document {
  static async getInitialProps({ renderPage }) {
    AppRegistry.registerComponent('main', () => Main);
    const { getStyleElement } = AppRegistry.getApplication('main');
    const page = await renderPage();
    const styles = [
      <style key="react-native-style" dangerouslySetInnerHTML={{ __html: style }} />,
      getStyleElement(),
    ];
    return { ...page, styles: Children.toArray(styles) };
  }

  render() {
    return (
      <Html style={{ height: '100%' }}>
        <Head />
        <body style={{ height: '100%', overflow: 'hidden' }}>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}
```
需求 `pages/_app.js` 文件

```js
import Head from 'next/head';

export default function App({ Component, pageProps }) {
  return (
    <>
      <Head>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
      </Head>
      <Component {...pageProps} />
    </>
  );
}
```

## 传输模块

默认情况下,React原住民生态系统中的模块不会被转录到网页浏览器中运行. React Introduct依靠地铁的高级缓存来快速重载. Next.js使用Webpack,其缓存水平不相上下,因此默认会转接节点模块. 您需要手动标记您想要转换的每个模块 `transpilePackages` 选项在 `next.config.js`数字 :

```js
const { withExpo } = require('@expo/next-adapter');

module.exports = withExpo({
  experimental: {
    transpilePackages: [
      // NOTE: Even though `react-native` is never used in Next.js,
      // you need to list `react-native` because `react-native-web`
      // is aliased to `react-native`. Adding `react-native-web` will not work.
      'react-native',
      'expo',
      // Add more React Native / Expo packages here...
    ],
  },
});
```

## 通知

使用 Next.js 表示您将会与 Next.js Webpack 配置相捆绑 。 这将导致您如何开发您的应用程序与您的网站的一些核心差异 .

## 解决问题

### 无法在模块外使用导入语句

查找哪个模块有导入语句并添加到 `transpilePackages` 选项在 `next.config.js`数字 :

```js
const { withExpo } = require('@expo/next-adapter');

module.exports = withExpo({
  experimental: {
    transpilePackages: [
      'react-native',
      'expo',
      // Add failing package here, and restart the server...
    ],
  },
});
```

## 常见问题

### @expo/next-adapter 是什么？

用于使用 Next\.js 捆绑 Expo 网页项目的适配器

### 如何安装 @expo/next-adapter？

在项目目录运行 npm install @expo/next-adapter，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：expo（\>=46）、webpack（^4\.46\.0 \|\| ^5\.74\.0）、react-native-web（^0\.18 \|\| ^0\.19）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @expo/next-adapter 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @expo/next-adapter 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @expo/next-adapter 可以商用吗？

@expo/next-adapter 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @expo/next-adapter 的下载量有多少？

根据 npm 官方下载统计，@expo/next-adapter 在 2026/10/14 – 2026/11/12 这 30 天内被下载 144,100 次，日均约 4,803 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @expo/next-adapter 还在维护吗？

最新版本 6\.0\.0 发布于 2024/01/08（2 年前）；至今共发布 181 个版本，其中过去 12 个月发布了 0 个；首次发布于 2019/10/16。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。