next.js是一个基于React的通用JavaScript框架，next.js为React组件模型提供了扩展，支持基于服务器的组件渲染，同时也支持在客户端继续进行渲染

next.js是一个基于React的通用JavaScript框架，next.js为React组件模型提供了扩展，支持基于服务器的组件渲染，同时也支持在客户端继续进行渲染

next.js是一个基于React的通用JavaScript框架，next.js为React组件模型提供了扩展，支持基于服务器的组件渲染，同时也支持在客户端继续进行渲染



Next.js

Next.js 是一个基于 React 的框架，专为服务端渲染和生成静态网站优化。它处理 HTTP 请求的方式主要通过两种方式：

1. **API 路由**: Next.js 允许你在 `/pages/api` 目录中创建 API 路由，这些路由可以处理 HTTP 请求，包括 `POST` 请求。API 路由文件是服务器端运行的，你可以在这里编写接收和处理 `POST` 请求的逻辑。

   例如，如果你想创建一个处理用户注册的 `POST` 请求，你可以在 `/pages/api` 目录下创建一个名为 `register.js` 的文件：

   ```javascript
   // pages/api/register.js

   export default function handler(req, res) {
     if (req.method === 'POST') {
       // 获取请求体中的数据
       const { username, password } = req.body;

       // 这里可以添加注册逻辑，例如验证、保存到数据库等
       // ...

       // 返回一个成功的响应
       res.status(200).json({ message: 'User registered successfully!' });
     } else {
       // 如果不是 POST 请求，返回 405 Method Not Allowed
       res.setHeader('Allow', 'POST');
       res.status(405).end(`Method ${req.method} Not Allowed`);
     }
   }
   ```

   当客户端发送 POST 请求到 `/api/register` 时，Next.js 会自动调用这个处理函数。

2. **getServerSideProps 或 getInitialProps**: 这些函数可以在页面加载之前在服务器上运行代码，但它们通常用于服务端渲染页面的数据获取，而不是直接处理 `POST` 请求。然而，你仍然可以通过检查传入的 `context` 或 `req` 对象来查看是否有 POST 请求，并据此执行逻辑，但这并不是它们的主要用途。

处理 `POST` 请求的推荐方法是使用 API 路由。这样可以将业务逻辑分离到专门的 API 端点，使得前端和后端逻辑更加清晰，并可使你的前端页面保持简洁，因为它们不需要处理 HTTP 请求的具体细节。

要让 POST 请求在 Next.js API 路由中工作，您可能需要做 3 件事。

*   将方法限制为`POST`
*   用于`JSON.parse()`解析路由中的 JSON（NextJS v12+ 中不需要）
*   向后端发送请求

[https://nextjs.org/docs/api-routes/api-middlewares](https://nextjs.org/docs/api-routes/api-middlewares)

API路线
-----

Next.js 中的 API 路由默认支持所有类型的请求，包括 GET、POST、DELETE 等。因此，虽然不是必需的，但最好将路由限制为您想要支持的方法。

就您而言，如果您只想支持`POST`特定路由上的请求，则可以使用`req.method`过滤掉非发布请求。

    if (req.method !== 'POST') {
      res.status(405).send({ message: 'Only POST requests allowed' })
      return
    }
    

要解析 JSON，您可以使用`JSON.parse()`. 如果您使用 NextJS v12+，只要您没有设置`bodyParser: false`.

    const body = JSON.parse(req.body)
    

将它们放在一起，您的 API 路由应该如下所示：

    // pages/route-name.js
    
    export default function handler(req, res) {
      if (req.method !== 'POST') {
        res.status(405).send({ message: 'Only POST requests allowed' })
        return
      }
    
    
      // not needed in NextJS v12+
      const body = JSON.parse(req.body)
    
      // the rest of your code
    }
    

发送请求
----

最后，您需要从前端代码向后端发送 POST 请求。您可能已经知道如何执行此操作，但为了完整性而提及这一点。

    fetch('/api/route-name', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(objectWithData),
    })
    

顺便说一句，您无需担心`fetch`Next.js 的跨浏览器兼容性。Next.js[在需要时自动添加一个polyfill](https://nextjs.org/docs/basic-features/supported-browsers-features#polyfills)。

与所有事情一样，这取决于情况。在 Next.js v12 中，`JSON.parse(req.body)`只要您没有在 API 路由的**导出**配置中显式设置，就不需要`bodyParser: false`在 API 路由中设置（请参阅[https://nextjs.org/docs/api-routes/api-middlewares](https://nextjs.org/docs/api-routes/api-middlewares)） 。`req.body`例如，如果`content-type`请求的 是 ，则会自动将 解析为对象`application/json`。在这种情况下，由于内容已预先解析为对象，因此尝试`JSON.parse(req.body)`在 API 中运行可能会引发错误。

在 Nextjs 13.4 中，您可以使用[路由处理程序](https://nextjs.org/docs/app/building-your-application/routing/router-handlers)

    import { NextResponse } from 'next/server'
     
    export async function POST() {
      const res = await fetch('https://data.mongodb-api.com/...', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'API-Key': process.env.DATA_API_KEY,
        },
        body: JSON.stringify({ time: new Date().toISOString() }),
      })
     
      const data = await res.json()
     
      return NextResponse.json(data)
    }
    

_有关路由处理程序的最新和现成模板以及更多内容，请使用_ [**Next.js 13+ Power Snippets | TypeScript/Javascript**](https://marketplace.visualstudio.com/items?itemName=krishnaacharyaa.nextjs-13-power-snippets)

NextJS 如何处理 post 请求？

在Next.js中，`_app.js` 和 `_document.js` 文件是对Next.js应用程序的默认结构和行为进行自定义的两个特殊文件。

### _app.js

`_app.js` 文件用于初始化所有页面。你可以使用这个文件来保持页面布局，或者保持页面的状态（如登录状态）时跨页面保持一致。还可以用来添加全局CSS样式。

当你创建自定义的`_app.js`，你需要导出一个React组件来接收一些特定的props，比如`Component`和`pageProps`。`Component` prop是你的页面内容，而`pageProps`是一个对象，包含了你能用来初始化页面的props。

例如，如果你想要所有页面都包含同一导航栏和页脚，你可以这样做：

```jsx
import React from 'react';
import Navbar from '../components/Navbar';
import Footer from '../components/Footer';

// 这里的Component是当前页面
function MyApp({ Component, pageProps }) {
  return (
    <>
      <Navbar />
      <main>
        <Component {...pageProps} />
      </main>
      <Footer />
    </>
  );
}

export default MyApp;
```

### _document.js

而`_document.js` 文件允许你自定义`<html>`和`<body>`标签以及文档的结构。这个文件只会在服务器端渲染时运行，因此不要在这里添加应用程序逻辑。

`_document.js` 用于更改服务端渲染的文档内容。这通常是需要添加服务端渲染的代码片段（比如自定义字体或者`<meta>`标签），或者当你需要为`<html>`和`<body>`标签添加额外的属性时。

一个自定义的`_document.js`看起来是这样的：

```jsx
import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <Head>
          {/* 这里放置 `<link>` 或 `<meta>` 标签 */}
        </Head>
        <body>
          {/* 这里可以添加额外的元素到body中，但通常你只需要 */}
          <Main /> {/* <-- 这里渲染应用内容 */}
          <NextScript /> {/* <-- 这里渲染Next.js脚本 */}
        </body>
      </Html>
    );
  }
}

export default MyDocument;
```

在`_document.js`中，`<Main />`组件会被替换为你的应用页面内容，而`<NextScript />`是用于Next.js的核心脚本，是必须包含的。

### 总结

- 使用`_app.js`来添加布局组件或全局状态管理（如Redux或Context API）。
- 使用`_document.js`来定制服务端渲染的文档结构和标签，例如添加自定义字体、统计代码或对`<html>`和`<body>`标签的附加属性。

请注意，这两个文件都是可选的，如果你的应用不需要对默认行为作出任何修改，你完全可以不添加它们。

Short answer: Yes, You can use both. They serve different purpose and can be used in the same application.

According to [NextJS docs](https://nextjs.org/docs/advanced-features/custom-app):

> Next.js uses the App component to initialize pages.
> 
> To override, create the `./pages/_app.js` file and override the App class

and

> Pages in Next.js skip the definition of the surrounding document's markup. For example, you never include `<html>`, `<body>`, etc. To override that default behavior, you must create a file at `./pages/_document.js`, where you can extend the Document class.

**Note**: `_document.js` is only rendered on the server side and not on the client side. so event handlers like `onClick` is not going to work.

Nextjs 项目中如何使用 _app.js 和 _document.js ？

在Next.js中，当你希望在路由匹配时改变链接的样式，可以使用 Next.js 提供的 `Link` 组件与 `useRouter` 钩子来实现。下面是一个具体的步骤和代码示例：

1. **导入必要的模块** - 从 `next/link` 导入 `Link` 组件，从 `next/router` 导入 `useRouter` 钩子。
2. **使用 `useRouter`** - 在你的组件内部，使用 `useRouter` 钩子得到当前的路由对象。
3. **比对路由** - 使用路由对象的 `pathname` 属性来判断当前路由是否与链接的目标路由匹配。
4. **设置样式** - 根据路由是否匹配，动态地应用不同的样式类或样式对象到你的链接元素上。

下面是一个简化的代码示例，展示了如何实现这一过程：

```jsx
import Link from 'next/link';
import { useRouter } from 'next/router';

export default function NavLink({ href, children }) {
  // 使用 useRouter 钩子获取当前路由信息
  const router = useRouter();

  // 检查此链接是否为当前路由，如果是，则设置一个特殊的样式类
  const isActive = router.pathname === href;

  // 根据是否激活来决定样式
  const linkStyle = {
    fontWeight: isActive ? 'bold' : 'normal',
    color: isActive ? 'green' : 'blue',
  };

  return (
    <Link href={href}>
      <a style={linkStyle}>{children}</a>
    </Link>
  );
}
```

这个 `NavLink` 组件可以这样使用：

```jsx
function NavigationBar() {
  return (
    <nav>
      <NavLink href="/">Home</NavLink>
      <NavLink href="/about">About</NavLink>
      <NavLink href="/contact">Contact</NavLink>
    </nav>
  );
}
```

在这个例子中，当用户导航到与 `NavLink` `href` 属性相匹配的路由时，链接的样式将变成粗体和绿色。如果不匹配，链接的样式将是普通字体和蓝色。这样可以很直观地向用户展示他们当前所处的页面。

这只是一个简单的样式设置方法。你也可以根据需要将样式类与元素类一起使用，进一步提升样式的复杂度和灵活性。

A simple solution based on the `useRouter` hook:

    import Link from "next/link";
    import { useRouter } from "next/router";
    
    
    export const MyNav = () => {
    
      const router = useRouter();
    
      return (
        <ul>
          <li className={router.pathname == "/" ? "active" : ""}>
            <Link href="/">home</Link>
          </li>
          <li className={router.pathname == "/about" ? "active" : ""}>
            <Link href="/about">about</Link>
          </li>
        </ul>
      );
    };
    
    

You could also use `router.asPath` instead of `router.pathname` if you want to include the url query parameters. This can be useful if you want to handle anchor tags such as `/#about`.

First, you need to have a component called Link, with temporary attribute activeClassName

    import { useRouter } from 'next/router'
    import PropTypes from 'prop-types'
    import Link from 'next/link'
    import React, { Children } from 'react'
    
    const ActiveLink = ({ children, activeClassName, ...props }) => {
      const { asPath } = useRouter()
      const child = Children.only(children)
      const childClassName = child.props.className || ''
    
      // pages/index.js will be matched via props.href
      // pages/about.js will be matched via props.href
      // pages/[slug].js will be matched via props.as
      const className =
        asPath === props.href || asPath === props.as
          ? `${childClassName} ${activeClassName}`.trim()
          : childClassName
    
      return (
        <Link {...props}>
          {React.cloneElement(child, {
            className: className || null,
          })}
        </Link>
      )
    }
    
    ActiveLink.propTypes = {
      activeClassName: PropTypes.string.isRequired,
    }
    
    export default ActiveLink
    

Then have a navigation bar with created component Link and css selector `:active` to differentiate between active and inactive link.

    import ActiveLink from './ActiveLink'
    
    const Nav = () => (
      <nav>
        <style jsx>{`
          .nav-link {
            text-decoration: none;
          }
          .active:after {
            content: ' (current page)';
          }
        `}</style>
        <ul className="nav">
          <li>
            <ActiveLink activeClassName="active" href="/">
              <a className="nav-link">Home</a>
            </ActiveLink>
          </li>
          <li>
            <ActiveLink activeClassName="active" href="/about">
              <a className="nav-link">About</a>
            </ActiveLink>
          </li>
          <li>
            <ActiveLink activeClassName="active" href="/[slug]" as="/dynamic-route">
              <a className="nav-link">Dynamic Route</a>
            </ActiveLink>
          </li>
        </ul>
      </nav>
    )
    
    export default Nav
    

After that, you can implement the navigation bar to your page:

    import Nav from '../components/Nav'
    
    export default () => (
      <div>
        <Nav />
        <p>Hello, I'm the home page</p>
      </div>
    )
    

The key of how does this work is located inside component Link, we compare the value of `router.pathname` with attribute `href` from the Link, if the value match the other then put specific className to make the link looks activated.

Reference: [here](https://github.com/zeit/next.js/tree/canary/examples/active-class-name)

If you're using Next 13 you can now do the following using the `usePathname()` [hook](https://beta.nextjs.org/docs/upgrade-guide#migrating-routing-hooks):

    
    import { usePathname} from 'next/navigation';
    
    export default function Example() {
        
        const pathname = usePathname();
    
        return(
            <div>
                <a
                    href="/welcome"
                    className={pathname == "/welcome" ? 
                    "active" : 
                    ""
                    }
                >
            </div>
        )
    }

If you want to use an anchor Link try this version of @Rotareti 's code:

    import Link from "next/link";
    import { useRouter } from "next/router";
    
    
    export const MyNav = () => {
    
      const router = useRouter();
    
      return (
        <ul>
          <li className={router.asPath == "/#about" ? "active" : ""}>
            <Link href="#about">about</Link>
          </li>
        </ul>
      );
    };

Another minimal version which supports `as` prop:

    import Link from "next/link";
    import {withRouter} from "next/router";
    import {Children} from "react";
    import React from "react";
    
    export default withRouter(({router, children, as, href, ...rest}) => (
       <Link {...rest} href={href} as={as}>
          {React.cloneElement(Children.only(children), {
             className: (router.asPath === href || router.asPath === as) ? `active` : null
          })}
       </Link>
    ));

NextJS 如何当路由匹配时设置链接样式？

在 Next.js 中，当您在静态模式下部署应用程序时，添加 favicon 图标是一项简单的任务。您可以通过以下步骤来实现：

1. **准备 Favicon 文件：**首先，您需要准备好一个或多个 favicon 文件，通常是 `.ico`、`.png` 或 `.svg` 格式。`favicon.ico` 是最常见的格式，因为它兼容所有浏览器。但现在很多现代浏览器也支持其他格式，如 PNG 和 SVG。

2. **将 Favicon 文件放置在 public 目录：**在 Next.js 项目的根目录下有一个名为 `public` 的目录。您需要将 favicon 文件放到这个目录下。Next.js 会自动将 `public` 目录下的资源映射到应用程序的根 URL。

3. **更新 `<Head>` 组件：**在您的页面组件或是 `_app.js` 文件中，使用 Next.js 的内置 `<Head>` 组件来添加指向 favicon 的链接标签。通常，这是在 `pages/_app.js` 中全局设置，也可以在特定页面的 `pages/your-page.js` 中设置。

下面是一个如何在 `pages/_app.js` 中添加 favicon 的例子：

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

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Head>
        {/* 添加 favicon */}
        <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
        <link rel="icon" href="/favicon.ico" type="image/x-icon" />
        
        {/* 支持其他尺寸的图标 */}
        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
        <link rel="manifest" href="/site.webmanifest" />
        
        {/* ...其他可能需要的元素（例如标题，描述等）... */}
      </Head>
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;
```

在上面的代码示例中，我们添加了几个 `<link>` 标签来定义不同情况下的图标。现代浏览器会根据需要选择合适的图标。

4. **构建和部署：**完成上述步骤后，当您构建并部署您的 Next.js 应用程序时，favicon 会自动被包括在内，并在浏览器的标签页上显示。

请注意，如果您正在开发环境中进行这些更改，您可能需要重启开发服务器才能看到新的 favicon。

1.  Create a `/static` folder in project root. This will be added to the static export folder.
2.  Add favicon file in `/static` folder.
3.  Add `_document.js` to `/pages/` folder according to [documentation (nextjs.org)](https://nextjs.org/docs/advanced-features/custom-document) or [documentation (github.com)](https://github.com/zeit/next.js/#custom-document).
4.  Add `<link rel="shortcut icon" href="/static/favicon.ico" />` to head.
5.  `npm run build && npm run export`

P.S. Thanks to the [previous answer](https://i.stack.imgur.com/oEKzt.png) that was deleted. It works!

* * *

Edit: Another way is to do this is to _import Head_ into your root layout and add the link there. Anything added to _Head_ gets inserted into the document head tag.

    import Head from 'next/head';
    
    const Page = (props) => (
      <div>
        <Head>
          <link rel="shortcut icon" href="/static/favicon.ico" />
        </Head>
        // Other layout/components
      </div>
    );
    
    export default Page;
    

**Update :**

The static directory has been deprecated in favor of the public directory. [Doc](https://err.sh/zeit/next.js/static-dir-deprecated)

So, the code would now look like

    import Head from 'next/head';
    
    const Page = (props) => (
      <div>
        <Head>
          <link rel="shortcut icon" href="/favicon.ico" />
        </Head>
        // Other layout/components
      </div>
    );

Simply add your favicon.ico in public folder, Next js will automatically take that favicon for all pages.

No need to add any favicon link to any pages or in tag no need to add link for favicon.

[https://github.com/zeit/next.js/blob/master/errors/static-dir-deprecated.md](https://github.com/zeit/next.js/blob/master/errors/static-dir-deprecated.md)

The accepted answer is nice, but might be worth pointing out that you _don't have_ to modify `_document.js` for adding a favicon (nor for adding any tags to `head`).

I found out for myself that placing favicon in `_app.js` makes more sense. This file is most likely to exist already for setting up a layout for the pages or something like this. And you can add `Head` tag _literally anywhere_ (see [the docs](https://nextjs.org/docs#populating-head))

So I ended up with `_app.js`

    class MyApp extends App {
      render() {
        const { Component, pageProps } = this.props;
    
        return (
          <Layout>
            <Head>
              <link rel="shortcut icon" href="/favicon.ico" />
            </Head>
            <Component {...pageProps} />
          </Layout>
        );
      }
    }

As of June 2020, you don't have to add/edit the `document.js` or `_head.js` files. All you need do to is place the `favicon.ico` file inside the `public` directory and that's it.

**Only adding .ico file is not enough.**

It is not enough as the default.ico file will be used only by desktop browsers. You need to support different devices like tables, smartphones, etc. By adding different sizes the app could be stored on smartphone desktop.

Add link tags to `<Head>` section in `_document.jsx` or `_document.tsx` The question is only about .ico file, but I would recommend to add different dimensions and formats for better support.

    import React from 'react';
    import Document, { Html, Head, Main, NextScript, DocumentContext, DocumentInitialProps } from 'next/document';
    
    class MyDocument extends Document {
      static async getInitialProps(ctx: DocumentContext): Promise<DocumentInitialProps> {
        const initialProps = await Document.getInitialProps(ctx);
        return { ...initialProps };
      }
    
      render(): React.ReactElement {
        return (
          <Html>
            <Head>
              <link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png" />
              <link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png" />
              <link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png" />
              <link rel="manifest" href="/favicons/site.webmanifest" />
              <link rel="mask-icon" href="/favicons/safari-pinned-tab.svg" color="#5bbad5" />
              <meta name="msapplication-TileColor" content="#ffc40d" />
              <meta name="theme-color" content="#ffffff" />
            </Head>
            <body>
              <Main />
              <NextScript />
            </body>
          </Html>
        );
      }
    }
    
    export default MyDocument;
    

You can generate different icons using [RealFaviconGenerator](https://realfavicongenerator.net/) and upload results to `/public/favicons/` folder. This folder can be referenced by `/favicons/` due to nature of [public directory](https://nextjs.org/docs/basic-features/static-file-serving).

Nextjs 如何在静态模式下添加 favicon 图标？

在 Next.js 项目中集成 Google Analytics 主要有几个步骤，以下是一个系统性的方法来实现：

1. **获取 Google Analytics 跟踪 ID**:
   要使用 Google Analytics，首先需要创建一个 Google Analytics 账户，并为你的网站创建一个属性。完成这些步骤后，Google Analytics 会提供一个跟踪 ID（通常是像 `UA-000000-2` 的格式）。

2. **安装 Google Analytics 库**:
   通过 npm 或 yarn 安装 Google Analytics 库（例如，`react-ga`）:
   ```sh
   npm install react-ga
   ```
   或者
   ```sh
   yarn add react-ga
   ```

3. **初始化 Google Analytics**:
   创建一个 utility 文件（例如 `analytics.js`），用于配置和初始化 Google Analytics，代码可能如下所示：
   ```javascript
   // analytics.js
   import ReactGA from 'react-ga';

   export const initGA = () => {
     console.log('GA init');
     ReactGA.initialize('你的谷歌分析跟踪ID');
   };

   export const logPageView = () => {
     console.log(`Logging pageview for ${window.location.pathname}`);
     ReactGA.set({ page: window.location.pathname });
     ReactGA.pageview(window.location.pathname);
   };

   export const logEvent = (category = '', action = '') => {
     if (category && action) {
       ReactGA.event({ category, action });
     }
   };

   export const logException = (description = '', fatal = false) => {
     if (description) {
       ReactGA.exception({ description, fatal });
     }
   };
   ```
   在这个文件中，我们定义了初始化函数、页面浏览日志函数以及其他用于记录事件和异常的函数。

4. **在 Next.js 应用中应用 Google Analytics**:
   你可以在 `_app.js` 文件中初始化 Google Analytics，并记录页面视图，如下所示：
   ```javascript
   // pages/_app.js
   import App from 'next/app';
   import { initGA, logPageView } from '../utils/analytics';

   class MyApp extends App {
     componentDidMount() {
       if (!window.GA_INITIALIZED) {
         initGA();
         window.GA_INITIALIZED = true;
       }
       logPageView();
     }

     render() {
       const { Component, pageProps } = this.props;
       return <Component {...pageProps} />;
     }
   }

   export default MyApp;
   ```
   请注意，在生产环境中，你应该添加条件来避免在开发环境中加载和执行 Google Analytics 脚本。

5. **监听路由改变**:
   在 Next.js 中，路由改变不会导致页面重新加载，因此你需要监听路由改变事件来记录新的页面访问。为此，可以修改 `_app.js` 文件来订阅路由更改事件，并在每次路由更改时记录页面视图：
   ```javascript
   // pages/_app.js
   import Router from 'next/router';
   // ...其他导入

   Router.events.on('routeChangeComplete', logPageView);
   ```
   这样，每当路由改变后，`logPageView` 函数就会被调用，从而向 Google Analytics 发送新的页面视图数据。

6. **部署并测试**:
   部署你的 Next.js 应用到生产环境，并在 Google Analytics Dashboard 中检查数据是否正确记录。

这是一个基本的集成方式，它涵盖了从设置 Google Analytics 到在 Next.js 应用程序中记录页面视图和事件的过程。根据需求，还可以扩展功能来捕获更详细的用户交互数据。

Next.js 自 v11 起[建议](https://nextjs.org/docs/messages/next-script-for-ga)使用他们的[`<Script>`](https://nextjs.org/docs/basic-features/script)标签，添加它的正确位置是[`App`组件](https://nextjs.org/docs/advanced-features/custom-app)。

`pages/_app.jsx`

    import React from 'react';
    import Script from 'next/script';
    
    const App = ({ Component, pageProps }) => {
      return (
        <>
          <Script
            src="https://www.googletagmanager.com/gtag/js?id=G-xxxxxxxxxx"
            strategy="afterInteractive"
          />
          <Script id="google-analytics" strategy="afterInteractive">
            {`
              window.dataLayer = window.dataLayer || [];
              function gtag(){window.dataLayer.push(arguments);}
              gtag('js', new Date());
    
              gtag('config', 'G-xxxxxxxxxx');
            `}
          </Script>
    
          <Component {...pageProps} />
        </>
      );
    };
    
    export default App;
    

您可以看到此解决方案在[Nestjs-starter](https://github.com/thisismydesign/nestjs-starter)中运行，我还从环境变量设置标签。

对于 v10 及更低版本，请`<script>`根据[Google 指南](https://developers.google.com/tag-platform/gtagjs/install#create_your_own_tag)使用常规标签。

请记住，Google Analytics 会自动进行页面跟踪，但这并不适用于所有用例。例如，[不跟踪](https://stackoverflow.com/a/73362255/2771889)`hash`参数`search`更改。这可能会导致很多混乱。例如，当使用或锚链接时，导航将不会被跟踪。要完全控制页面视图跟踪，您可以[禁用自动跟踪](https://developers.google.com/analytics/devguides/collection/gtagjs/pages#disable_pageview_measurement)。详细解释请参见：[The Ultimate Guide to Google Analytics (UA & GA4) on React (Or Anything Else)](https://csaba-apagyi.medium.com/the-ultimate-guide-to-google-analytics-ua-ga4-on-react-or-anything-else-ec9dc84c0211)[](https://stackoverflow.com/a/73362255/2771889)[`HashRouter`](https://reactrouter.com/en/main/router-components/hash-router)[](https://developers.google.com/analytics/devguides/collection/gtagjs/pages#disable_pageview_measurement)[](https://csaba-apagyi.medium.com/the-ultimate-guide-to-google-analytics-ua-ga4-on-react-or-anything-else-ec9dc84c0211)

手动页面跟踪：[https://stackoverflow.com/a/63249329/2771889](https://stackoverflow.com/a/63249329/2771889)

### 使用 Typescript 通过 NextJS 设置 Google Analytics

我正在为我的个人网站（[https://github.com/GorvGoyl/Personal-Site-Gourav.io](https://github.com/GorvGoyl/Personal-Site-Gourav.io)）使用以下设置，它工作正常，没有任何 linting 错误。仅针对生产启用分析。

*   创建一个[Google 分析项目](https://analytics.google.com/analytics/web/)并获取Measurement ID。
*   在您的 NextJS 项目中，创建`/lib/gtag.ts`文件并添加您的 Google 测量 ID：

    export const GA_TRACKING_ID = "<INSERT_TAG_ID>";
    
    // https://developers.google.com/analytics/devguides/collection/gtagjs/pages
    export const pageview = (url: URL): void => {
      window.gtag("config", GA_TRACKING_ID, {
        page_path: url,
      });
    };
    
    type GTagEvent = {
      action: string;
      category: string;
      label: string;
      value: number;
    };
    
    // https://developers.google.com/analytics/devguides/collection/gtagjs/events
    export const event = ({ action, category, label, value }: GTagEvent): void => {
      window.gtag("event", action, {
        event_category: category,
        event_label: label,
        value,
      });
    };
    

*   还要安装 gtag `types`：

    npm i -D @types/gtag.js
    

*   创造`/pages/_document.tsx`：

    import Document, { Html, Head, Main, NextScript } from "next/document";
    
    import { GA_TRACKING_ID } from "../lib/gtag";
    
    const isProduction = process.env.NODE_ENV === "production";
    
    export default class MyDocument extends Document {
      render(): JSX.Element {
        return (
          <Html>
            <Head>
              {/* enable analytics script only for production */}
              {isProduction && (
                <>
                  <script
                    async
                    src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
                  />
                  <script
                    // eslint-disable-next-line react/no-danger
                    dangerouslySetInnerHTML={{
                      __html: `
                window.dataLayer = window.dataLayer || [];
                function gtag(){dataLayer.push(arguments);}
                gtag('js', new Date());
                gtag('config', '${GA_TRACKING_ID}', {
                  page_path: window.location.pathname,
                });
              `,
                    }}
                  />
                </>
              )}
            </Head>
            <body>
              <Main />
              <NextScript />
            </body>
          </Html>
        );
      }
    }
    
    

*   创造`/pages/_app.tsx`：

    import { AppProps } from "next/app";
    import { useRouter } from "next/router";
    import { useEffect } from "react";
    import * as gtag from "../lib/gtag";
    const isProduction = process.env.NODE_ENV === "production";
    
    const App = ({ Component, pageProps }: AppProps): JSX.Element => {
      const router = useRouter();
    
      useEffect(() => {
        const handleRouteChange = (url: URL) => {
          /* invoke analytics function only for production */
          if (isProduction) gtag.pageview(url);
        };
        router.events.on("routeChangeComplete", handleRouteChange);
        return () => {
          router.events.off("routeChangeComplete", handleRouteChange);
        };
      }, [router.events]);
      // eslint-disable-next-line react/jsx-props-no-spreading
      return <Component {...pageProps} />;
    };
    
    export default App;
    
    

> 更多信息： https: [//gourav.io/blog/nextjs-cheatsheet](https://gourav.io/blog/nextjs-cheatsheet)

在你的方法中`_document.js`你重写了该`getInitialProps`方法。您还可以重写该`render`方法。只需添加

      render() {
        return (
          <Html lang={this.props.lang || "en"}>
            <Head>
              <script
                dangerouslySetInnerHTML={{
                  __html: `[google analytics tracking code here]`
                }}
              />
            </Head>
            <body>
              <Main />
              <NextScript />
            </body>
          </Html>
        );
      }
    

确保导入所需的组件：

`import Document, { Html, Head, Main, NextScript } from "next/document"`

**不要在这里使用最上面的答案**：_禁止__使用本机`<script>`_标签，_它应该在`<head>`标签_之外定义。

这是在 NextJS 中包含脚本标签并配置 Google Analytics 的正确方法：

    import Script from 'next/script'
    import Head from 'next/head'
    
    export default function Index() {
      return (
        <>
          <Head>
            <title>Next.js</title>
          </Head>
          <Script
            src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"
            strategy="afterInteractive"
          />
          <Script id="google-analytics" strategy="afterInteractive">
            {`
              window.dataLayer = window.dataLayer || [];
              function gtag(){window.dataLayer.push(arguments);}
              gtag('js', new Date());
    
              gtag('config', 'GA_MEASUREMENT_ID');
            `}
          </Script>
        </>
      )
    }
    

欲了解更多信息：[https://nextjs.org/docs/messages/next-script-for-ga](https://nextjs.org/docs/messages/next-script-for-ga)

[这是next.js](https://github.com/vercel/next.js/tree/canary/examples/with-google-analytics)推荐的方法。

`/components/GoogleAnalytics.jsx`

    import Script from 'next/script'
    import { useEffect } from 'react'
    import { useRouter } from 'next/router'
    
    const GA_TRACKING_ID = '...'
    
    export default () => {
      const router = useRouter()
      useEffect(() => {
        const handleRouteChange = url => {
          window.gtag('config', GA_TRACKING_ID, { page_path: url })
        }
        router.events.on('routeChangeComplete', handleRouteChange)
        return () => {
          router.events.off('routeChangeComplete', handleRouteChange)
        }
      }, [router.events])
    
      return (
        <>
          <Script
            strategy='afterInteractive'
            src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
          />
          <Script
            id='gtag-init'
            strategy='afterInteractive'
            dangerouslySetInnerHTML={{
              __html: `
                window.dataLayer = window.dataLayer || [];
                function gtag(){dataLayer.push(arguments);}
                gtag('js', new Date());
                gtag('config', '${GA_TRACKING_ID}', {
                  page_path: window.location.pathname,
                });
              `
            }}
          />
        </>
      )
    }
    
    

`/pages/_app.jsx`

    import GoogleAnalytics from './../components/GoogleAnalytics'
    
    export default function App ({ Component, pageProps }) {
      return (
        <>
          <Component {...pageProps} />
    
          {
            process.env.NODE_ENV === 'production' &&
              <GoogleAnalytics />
          }
        </>
      )
    }

NextJS 项目如何中使用谷歌分析？

在Next.js中，打开一个新的浏览器标签（Tab）显示链接通常涉及到在`<a>`标签中设置`target`属性为`_blank`。这是HTML标准的一部分，并不是Next.js特有的功能。要在Next.js的`Link`组件中实现这一点，你需要在`Link`组件内部放置一个`<a>`标签，并在这个`<a>`标签上设置 `target="_blank"`属性。

这里有一个例子：

```jsx
import Link from 'next/link';

const MyComponent = () => {
  return (
    <div>
      <h1>我的页面</h1>
      <Link href="/about">
        <a target="_blank" rel="noopener noreferrer">关于我们</a>
      </Link>
    </div>
  );
};

export default MyComponent;
```

在这个例子中，用户点击“关于我们”的链接时，将会在一个新的浏览器标签中打开`/about`页面。

这里还使用了`rel="noopener noreferrer"`属性，这是为了安全考虑。这样可以防止新打开的页面对原始页面拥有潜在的引用，并保护用户免受`window.opener` API可能导致的恶意行为。这是一种非常推荐的做法，特别是在使用`target="_blank"`时。

由于这是外部链接，因此您不需要使用 Link

    <a target="_blank" href="https://twitter.com/" rel="noopener noreferrer">
        <div className={`${dark ? styles.iconTwitterWhite : styles.iconTwitter} mr-3`} />
     </a>

**2022 年 11 月 答复：**

随着 Next 13 的发布，该`<Link/>`组件现在在内部呈现`<a/>`标签，因此您不再需要添加子`<a/>`标签。

这意味着为了在新选项卡中打开链接，您应该能够执行以下操作：

`<Link href="https://google.com" rel="noopener noreferrer" target="_blank"> Google </Link>`

我听说有些情况下你想坚持使用`Link`（国际化的东西`Link`有帮助），这样你就可以使用`passHref`（它只是将其传递`href`给直接的孩子），如下所示：

    <Link href="/" passHref>
      <a target="_blank" rel="noopener noreferrer">
        Foo
      </a>
    </Link>

> 我的项目中的路径：public/NameFile/NamePdf.pdf
> 
> > 注意：1）不要忘记“Link”的依赖=> import Link from 'next/link' 2）如您所见，我没有在链接中添加“public”。\>> 因为你根本不需要放置它，因为 NextJs 很聪明🧠。

          <Link href="./NameFile/NamePdf.pdf" download>
              <a target="_blank">
                  {your code ......}
              </a>
          </Link>

我尝试了下面的代码片段，它工作正常，没有错误。否则，我的 localhost 可以正常工作，但当我部署到 Vercel 时，它会在构建日志中出现错误。因此，我尝试了此代码片段，它可以在 localhost 和 Vercel 上正常工作。

    <Link href="https://twitter.com/">
      <a target="_blank" rel="noopener noreferrer" className='link-item'>
        <div className={`${dark ? styles.iconTwitterWhite : styles.iconTwitter} mr-3`} />
      </a>
    </Link>

运行代码片段Hide results

展开片段

确保将属性`target="_blank"`添加到标签中。`rel="noopener noreferrer"``a`

NextJS 如何在新的选项卡 Tab 中打开链接？

在Next.js中，您可以通过检查`window`对象是否存在来确定当前的代码是在服务器端还是客户端运行。`window`对象是浏览器环境的全局对象，它在服务器端是不存在的。因此，您可以通过尝试访问`window`来决定当前的代码执行环境。

以下是一个如何检测的例子：

```javascript
const isClientSide = () => {
  return typeof window !== 'undefined';
};

const isServerSide = () => {
  return typeof window === 'undefined';
};
```

您可以在您的组件或者函数内部使用这些辅助函数来确定执行环境。例如：

```javascript
function MyComponent() {
  if (isClientSide()) {
    // 客户端特定的代码
    console.log("这段代码在客户端运行");
  }

  if (isServerSide()) {
    // 服务器端特定的代码
    console.log("这段代码在服务器端运行");
  }

  // ...
}
```

需要注意的是，Next.js 支持服务器端渲染（SSR）和静态站点生成（SSG），因此组件的生命周期函数（如`getServerSideProps`，`getStaticProps`等）肯定是在服务器端执行的。而 `useEffect`钩子函数里面的代码，以及组件渲染的大部分逻辑，则在客户端执行。

始终要小心处理服务器端和客户端代码，因为在服务器端使用任何客户端特有的API（如`window`或`document`）都会导致错误。同样地，如果你在服务器端执行了本应只在客户端执行的代码，也可能会有未预期的后果。

现在（2020 年 1 月）应该是这样，`typeof window === 'undefined'`因为`process.browser`已弃用

参考[https://github.com/zeit/next.js/issues/5354#issuecomment-520305040](https://github.com/zeit/next.js/issues/5354#issuecomment-520305040)

您可以用来`process.browser`区分服务器环境（NodeJS）和客户端环境（浏览器）。

`process.browser`位于`true`客户端和`undefined`服务器端。

由于我不喜欢依赖奇怪的第三方事物来实现这种行为（尽管`process.browser`似乎来自_Webpack_），所以我认为首选的检查方法是检查是否存在`appContext.ctx.req`这样的情况：

    async getInitialProps (appContext) {
    
        if (appContext.ctx.req) // server? 
        {
            //server stuff
        }
        else {
            // client stuff
        }
    }
    

来源： https: [//github.com/zeit/next.js/issues/2946](https://github.com/zeit/next.js/issues/2946)

另一项注意事项是`componentDidMount()`始终在浏览器上调用。我经常加载初始数据集（seo 内容）`getInitialProps()`，然后在方法中加载更深入的数据 `componentDidMount()`。

另外，作为变体，您可以将变量添加到`.env`文件中而不带`NEXT_PUBLIC_`前缀。

> 就像： `IS_SERVER_FLAG=true`

该变量仅在服务器端可用

之后，您可以在代码中检查它

`const isServer = process.env.IS_SERVER_FLAG ? 'RUN ON SERVER' : 'RUN_ON_CLIENT'`

Nextjs 项目如何检测当前运行环境是在客户端还是在服务器？

在 Next.js 的 `next/image` 组件中，通常我们不直接设置高度为100%，因为`next/image`组件是为了优化Web图片而设计的，它内部进行了很多优化处理，包括懒加载、图片压缩和各种尺寸的生成等。`next/image` 组件通常需要你提供图片的宽度和高度，以便能够生成不同尺寸的图片，以及保持图片的原始宽高比。

不过，如果你的设计需要让图片的高度适应其父元素的高度，可以通过几种方式来间接实现：

1. **使用外部容器来控制尺寸：** 你可以创建一个外部容器，并设置其高度为100%，然后将 `next/image` 组件放入其中，并使用`layout="fill"`属性，这样图片就会填充整个容器。

```jsx
<div style={{ position: 'relative', height: '100%' }}>
  <Image
    src="/path/to/image.jpg"
    alt="描述文字"
    layout="fill"
    objectFit="cover" // 或者其它适合的object-fit值
  />
</div>
```

在上述代码中，`objectFit`属性类似于CSS的`object-fit`，你可以设置为`cover`、`contain`、`none`等值，根据图片与容器的关系，让图片以不同的方式填充容器。

2. **使用样式覆盖：** 你可以通过全局样式或者内联样式的方式，覆盖`next/image`组件的默认样式。但是这种方式可能会破坏`next/image`的一些内部优化，所以不太推荐使用。

例如：
```css
/* 在全局样式文件中 */
.customImg {
  height: 100% !important;
}

/* 或者使用内联样式，需要注意的是，Next.js 不允许直接对 Image 组件使用内联样式，你可能需要通过其他方式如styled-jsx来实现 */
```

使用这种方法时，需要注意，直接改变`next/image`的高度可能会导致图片的宽高比失调，导致图片变形。

在实际项目中，推荐的方法是第一种，通过外部容器来控制图片的尺寸，这样能够更好地利用`next/image`组件的优化特性。如果必须要让图片的高度为100%，一定要注意图片的宽高比，确保图片不会因为尺寸调整而失真。

这对我有用。

和`next/image`：

    <div style={{width: '100%', height: '100%', position: 'relative'}}>
      <Image
        alt='Mountains'
        src='/mountains.jpg'
        layout='fill'
        objectFit='contain'
      />
    </div>
    

与`next/future/image`：

    <Image
        fill
        alt='Mountains'
        src='/mountains.jpg'
        sizes='100vw'/>
    

[下一个/未来/图像](https://nextjs.org/docs/api-reference/next/future/image)

**2023 年**，上述所有解决方案均已弃用，

使用下面

    <Image
      src="url"
      width={0}
      height={0}
      sizes="100vw"
      style={{ width: '100%', height: 'auto' }} // optional
    />
    

Github：[https://github.com/vercel/next.js/discussions/18474#discussioncomment-5501724](https://github.com/vercel/next.js/discussions/18474#discussioncomment-5501724)

<img src="/path/to/image.jpg" alt="" title="" />
    

在 NextJS 12 及更低版本中

    <Image src="/path/to/image.jpg" alt="" title="" width="100%" height="100%" layout="responsive" objectFit="contain"/>

这是一种方法：例如，我想要一个覆盖其容器（div）的整个宽度和高度的图像。

    <div className={'image-container'}>
      <Image src={path} layout="fill" className={'image'} />
    </div>
    

这是样式：（有一个容器 div 占据视口的一半宽度和高度，我的图像将覆盖它。）

    // Nested Styling
    .image-container {
        width: 50vw;
        height: 50vh;
        position: relative;
    
        .image {
            width: 100%;
            height: 100%;
            position: relative !important;
            object-fit: cover; // Optional
        }
    }
    
    // Or Normal Styling
    .image-container {
        width: 50vw;
        height: 50vh;
        position: relative;
      }
    .image-container .image {
        width: 100%;
        height: 100%;
        position: relative !important;
        object-fit: cover; // Optional
    }

在NextJS的 v13 版本中

```
       <Image
        src={src}
        width={200}
        height={160}
        alt={alt}
        sizes="(max-width: 768px) 100vw,
              (max-width: 1200px) 50vw,
              33vw"
        style={{ height: '100%', width: '100%' }} //The point is right there!
        //OR className='w-100 h-100'
      /> 
```

Nextjs 如何设置 image 组件的宽度为 100px ?

在 Next.js 中，可以通过两种主要方式设置应用的端口：

### 1. 使用命令行参数

你可以在启动 Next.js 应用时，通过命令行指定端口。默认情况下，Next.js 应用会在端口 3000 上运行。但如果你想改变端口，可以在 `npm run dev` 或者 `yarn dev` 命令后面添加 `-p` 参数，后跟你希望使用的端口号。例如，如果你想在端口 5000 上运行应用，可以这样操作：

```bash
npm run dev -p 5000
# 或者
yarn dev -p 5000
```

### 2. 在代码中设置

如果你需要在代码层面配置端口，你可以在 Next.js 自定义服务器的脚本中这样做。例如，如果你使用的是 Express.js 作为自定义服务器，你可以在 `server.js` 文件中设置端口，如下所示：

```javascript
const express = require('express');
const next = require('next');

const port = parseInt(process.env.PORT, 10) || 5000;
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  const server = express();

  server.all('*', (req, res) => {
    return handle(req, res);
  });

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

在上面的代码示例中，端口号被设置为环境变量 `PORT` 的值，如果没有指定，则默认为 `5000`。这样，你可以通过设置环境变量的方式灵活地更改端口号。

### 环境变量

另外，你还可以通过环境变量文件 `.env.local` 来设置端口号。但请注意，Next.js 并不直接支持通过环境变量来设置端口号，你需要在自定义服务器代码中读取环境变量来设置端口。

```bash
# .env.local 文件
PORT=5000
```

然后在 `server.js` 中读取这个环境变量：

```javascript
const port = parseInt(process.env.PORT, 10) || 3000;
```

### 结论

通常，大多数情况下使用命令行参数来设置端口就足够了，它简单直接。但如果你需要更复杂的配置，或者你的应用已经使用了自定义服务器，你可以在代码中设置端口。记住，对于生产环境部署，端口通常由部署环境决定，例如，许多 PaaS（平台即服务）如 Heroku 或 Vercel 会自动分配端口，你不需要手动设置。

This work for me:

    "scripts": { 
        "dev": "next dev -p 8080",
        "start": "next start -p 8080",
    },

"scripts": {
        "dev": "next dev -p 8080", // for dev 
        "start": "next start -p 8080" // for prod
    },

With `yarn`, `pnpm` you can easily pass any arguments:  
`yarn dev -p 8080` or `yarn dev --port=8080`

With `npm` using `--` to pass arguments:  
`npm run dev -- -p 8080`

The application will start at http://localhost:3000 by default. The default port can be changed with -p, like so:

     npx next dev -p 4000
    

Or using the PORT environment variable:

    PORT=4000 npx next dev
    

#note that I used npx not npm

You can also set the hostname to be different from the default of 0.0.0.0, this can be useful for making the application available for other devices on the network. The default hostname can be changed with -H, like so:

     npx next dev -H 192.168.1.2
    

If you're getting an error that the port is already in use, what you can do to resolve it on windows is

    Go to the Task Manager.
    
    Scroll and find a task process named. Node.js: Server-side
    
    End this particular task.

just need to do:

    yarn dev -p PORT_YOU_LIKE

Nextjs 项目如何设置运行端口?

Next.js 和 Create React App（CRA）是构建React单页应用的两种流行框架/工具，它们在设计哲学和功能特点上有一些关键的区别：

1. **服务端渲染（SSR）与客户端渲染**：
   - **Next.js** 支持**服务端渲染**，这意味着React组件将在服务器上渲染成HTML，然后发送到客户端。这对于搜索引擎优化（SEO）和性能优化非常有用，因为用户可以更快地看到页面的第一次渲染，并且搜索引擎可以抓取内容。
     - 例如，如果我需要构建一个博客网站，服务端渲染可以让博客文章在用户访问时快速显示出来，同时也更利于搜索引擎索引。
   - **Create React App** 生成的是完全的**客户端JavaScript应用**，这意味着所有的渲染工作都在浏览器中完成。这可能会导致初始加载时间较长，尤其是在JavaScript较重的应用中。

2. **静态站点生成（SSG）**：
   - **Next.js** 还提供了静态站点生成的选项，允许你预先生成页面，在构建时将数据整合进HTML。这样做的好处是能够生成可以直接由CDN服务的、快速且成本低廉的页面。
     - 例如，如果我负责一个营销网站，其内容不经常改变，我可能会选择Next.js的静态站点生成功能，以便提供快速的加载时间并减少服务器成本。

3. **路由**：
   - **Next.js** 提供了一个基于文件系统的路由系统，你可以通过在`pages`文件夹中添加JS/TS文件来自动创建路由。这简化了路由的配置。
     - 例如，增加一个名为`about.js`的页面，Next.js会自动将其关联到`/about`这个URL路径。
   - **Create React App** 没有内建的路由系统，通常需要使用像React Router之类的第三方库来处理路由。

4. **构建和启动速度**：
   - **Next.js** 由于其功能更为丰富，可能在构建和启动时比CRA稍微慢一些，特别是在大型项目中。
   - **Create React App** 通常启动得更快，这对于小型项目和原型设计可能更有优势。

5. **设置和配置**：
   - **Next.js** 预设了很多配置，比如Webpack和Babel的配置，这为开发者提供了便利，但同时也可能对想要更细粒度控制的开发者造成限制。
     - 例如，我在工作中使用Next.js进行过一个项目，该项目受益于Next.js的预设配置，我们不需要花太多时间来配置Webpack。
   - **Create React App** 提供一个相对简单的起步体验，但如果你需要自定义配置（如Webpack），你可能需要'eject'，这会暴露所有的配置文件，从而允许更深层次的配置。

6. **API路由**：
   - **Next.js** 提供了API路由的功能，允许你在同一个项目中创建API端点，这对于构建全栈应用非常方便。
     - 举例来说，如果我需要构建一个应用并且希望前端和后端紧密集成，我可以在`pages/api`目录中直接添加API路由，而无需另外创建一个后端服务。

7. **社区和生态**：
   - 虽然这两个工具各自拥有庞大、活跃的社区，但是由于Next.js提供了更多的内建功能，它的生态系统可能相对于Create React App来说更为复杂且多样化。例如，Next.js社区中包含了更多关于服务端渲染和静态站点生成的最佳实践讨论，同时也有更多针对性能优化、SEO以及API路由管理的资源。

8. **部署和托管**：
   - **Next.js** 设计时就考虑了与Vercel（由同一开发团队维护）的无缝集成，使得部署Next.js应用变得非常简易。尽管如此，Next.js应用也可以部署在其他支持Node.js的平台上。
   - **Create React App** 生成的静态文件可以轻松地部署在任何可以托管静态文件的服务上，如GitHub Pages、Netlify或Vercel等。

9. **开箱即用的功能**：
   - **Next.js** 提供了许多开箱即用的功能，如图片优化（`next/image`）、国际化（i18n）路由、环境变量的支持等。
   - **Create React App** 更专注于提供一个干净、无预设的React环境，这意味着需要额外的工作来集成上述功能。

10. **灵活性与控制**：
    - **Next.js** 在提高开发效率的同时，牺牲了一定程度的灵活性。如果默认的配置不满足需求，可能需要更多时间来理解和修改内部设置。
    - **Create React App** 则提供了一个较为灵活的起点，尤其是在执行`eject`之后，开发者可以对构建等细节有完全的控制。

总结来说，Next.js和Create React App各自适合不同的场景和需求。Next.js更倾向于那些需要服务端渲染、静态站点生成和API路由等全栈特性的复杂应用，而Create React App则可能更适合那些需要快速启动并希望保持较高灵活性的简单客户端应用。选择哪个框架/工具，需要根据项目的具体需求、开发团队的技术栈以及对SEO和性能的考量来决定。

I've used both NextJs and CRA. Both these frameworks can be used to get started quickly and provide a good developer experience. However, both of these have use cases where either of them shines better. I'll try to compare them based on some of these factors. Feel free to suggest edits with additional points or comments

Server Side Rendering
---------------------

CRA

Next.js

CRA doesn't support SSR out of the box.  
However, you can still configure it.  
It just takes more effort to setup SSR with your preferred server and configuration. The development team doesn't have plans to support this in the near future. They [suggest other tools](https://github.com/facebook/create-react-app/blob/2da5517689b7510ff8d8b0148ce372782cb285d7/README.md#popular-alternatives) for this use case.

NextJs has [different types for SSR](https://nextjs.org/docs/basic-features/data-fetching). It supports SSR out of the box.  
\* Static generation: fetch data at build time. This works best for use cases like blogs or static websites  
\* Server side rendering: fetch data and render for each requests. You have to do this when you need to serve different view for different users.

* * *

Configurability
---------------

I think this is point where these tools are very different and your decision can depend on this factor

CRA

Next.js

Create React App doesn't leave you a lot of room to configure it.  
Configurations like webpack config cannot be changed unless  
you stray away from normal CRA way (eject, rescripts, rewired, craco).  
Basically, you have to use what's configured in  
`react-scripts` which is the core of CRA.

Almost everything is [configurable](https://nextjs.org/docs/api-reference/next.config.js/introduction).  
If you check the example [NextJs templates](https://github.com/vercel/next.js/tree/canary/examples/with-typescript-eslint-jest), you can see files like  
`babelrc`, `jest.config`, `eslintrc` etc  
that you can configure.

* * *

Maintainability
---------------

CRA

Next.js

CRA is very opinionated.  
If you keep updated with the releases of CRA, it's not hard to maintain.

NextJs is also well maintained. They release regular updates.

* * *

Typescript
----------

CRA

Next.js

Supports out of the box. You can initialize CRA app with typescript with  
`npx create-react-app my-app --template typescript`

[Supports typescript](https://nextjs.org/docs/basic-features/typescript) out of the box.  
Start with configurations for typescript with `touch tsconfig.json`

* * *

Hooks support
-------------

Latest version of both CRA and NextJs installs a version of React that supports hooks. You can also upgrade to the latest version easily

* * *

Redux support
-------------

Redux is a library that you can use with both these tools.

**Create React App** is just a React project creation engine to help you setup your React project quickly. After running the CRA script `npx create-react-app <appname>` you will get a nice and clean single-page application that you can run. Under the hood you also get things like babel, eslint, jest, webpack already setup so it's a really convenient way to start doing React development. And in case you'd need more control over the configuration of those tools, you can still use `npm run eject`.

**Next.js** on the other hand is a framework based on React to build Node.js server-side apps. This means you will use the same component-oriented logic to build pages and leverage the Next.js routing engine for page to page navigation. Server-side rendering will allow loading time to be more spread over time, so perceived performance will be probably better. Redux can be used as well but there will be some additional steps to make it work properly (see [https://github.com/kirill-konshin/next-redux-wrapper](https://github.com/kirill-konshin/next-redux-wrapper))

**Whatever you choose, in the end, it will be React coding**. _Components_, _JSX_, _TypeScript support_, _React hooks_, and all other core aspects of React will be supported either way. Therefore, you can expect similar degree of maintainability. On the other hand, scalability depends on your choice: if you choose Next.js you will host the app on a server infrastructure which should be sized according to your audience whereas React bundle created with CRA just need to be statically hosted somewhere.

TLDR
----

biggest difference is purpose of both projects. NextJS : [JAM Stack](https://jamstack.org/) or [Static Site Generator](https://www.staticgen.com/next) Create React App : is an officially supported way to create single-page React applications.

Explanation:
------------

This conundrum is true for many opensource projects. Seem alternative of other but they have key differences. For Example in this case Although both projects use ReactJS as front end and produce webapps. the problem they solve are very distinct. there are some overlapping features themes/templates in js. but development and future work will be to enhance project such that it helps solve there problem statement in better way.

i.e. NextJS will try to include if there are any new Markdown features developed. which won't be the case in CreateReactApps.

Suggestion.
-----------

from your question it seems you are looking these projects for developing React Native Apps. So I will suggest go with Create React App.

your comparison should primarily be whether this project align with Problem I am solving. then compare. Maintainability, Scalability, Typescript and React Hooks/Redux support.

In case needed more info do comment.

Next.js 和 Create React App（CRA）是构建React单页应用的两种流行框架/工具，它们在设计哲学和功能特点上有一些关键的区别：

1. **服务端渲染（SSR）与客户端渲染**：
   - **Next.js** 支持**服务端渲染**，这意味着React组件将在服务器上渲染成HTML，然后发送到客户端。这对于搜索引擎优化（SEO）和性能优化非常有用，因为用户可以更快地看到页面的第一次渲染，并且搜索引擎可以抓取内容。
     - 例如，如果我需要构建一个博客网站，服务端渲染可以让博客文章在用户访问时快速显示出来，同时也更利于搜索引擎索引。
   - **Create React App** 生成的是完全的**客户端JavaScript应用**，这意味着所有的渲染工作都在浏览器中完成。这可能会导致初始加载时间较长，尤其是在JavaScript较重的应用中。

2. **静态站点生成（SSG）**：
   - **Next.js** 还提供了静态站点生成的选项，允许你预先生成页面，在构建时将数据整合进HTML。这样做的好处是能够生成可以直接由CDN服务的、快速且成本低廉的页面。
     - 例如，如果我负责一个营销网站，其内容不经常改变，我可能会选择Next.js的静态站点生成功能，以便提供快速的加载时间并减少服务器成本。

3. **路由**：
   - **Next.js** 提供了一个基于文件系统的路由系统，你可以通过在`pages`文件夹中添加JS/TS文件来自动创建路由。这简化了路由的配置。
     - 例如，增加一个名为`about.js`的页面，Next.js会自动将其关联到`/about`这个URL路径。
   - **Create React App** 没有内建的路由系统，通常需要使用像React Router之类的第三方库来处理路由。

4. **构建和启动速度**：
   - **Next.js** 由于其功能更为丰富，可能在构建和启动时比CRA稍微慢一些，特别是在大型项目中。
   - **Create React App** 通常启动得更快，这对于小型项目和原型设计可能更有优势。

5. **设置和配置**：
   - **Next.js** 预设了很多配置，比如Webpack和Babel的配置，这为开发者提供了便利，但同时也可能对想要更细粒度控制的开发者造成限制。
     - 例如，我在工作中使用Next.js进行过一个项目，该项目受益于Next.js的预设配置，我们不需要花太多时间来配置Webpack。
   - **Create React App** 提供一个相对简单的起步体验，但如果你需要自定义配置（如Webpack），你可能需要'eject'，这会暴露所有的配置文件，从而允许更深层次的配置。

6. **API路由**：
   - **Next.js** 提供了API路由的功能，允许你在同一个项目中创建API端点，这对于构建全栈应用非常方便。
     - 举例来说，如果我需要构建一个应用并且希望前端和后端紧密集成，我可以在`pages/api`目录中直接添加API路由，而无需另外创建一个后端服务。

7. **社区和生态**：
   - 虽然这两个

Next.js 和 Create React App（CRA）是构建React单页应用的两种流行框架/工具，它们在设计哲学和功能特点上有一些关键的区别：

1. **服务端渲染（SSR）与客户端渲染**：
   - **Next.js** 支持**服务端渲染**，这意味着React组件将在服务器上渲染成HTML，然后发送到客户端。这对于搜索引擎优化（SEO）和性能优化非常有用，因为用户可以更快地看到页面的第一次渲染，并且搜索引擎可以抓取内容。
     - 例如，如果我需要构建一个博客网站，服务端渲染可以让博客文章在用户访问时快速显示出来，同时也更利于搜索引擎索引。
   - **Create React App** 生成的是完全的**客户端JavaScript应用**，这意味着所有的渲染工作都在浏览器中完成。这可能会导致初始加载时间较长，尤其是在JavaScript较重的应用中。

2. **静态站点生成（SSG）**：
   - **Next.js** 还提供了静态站点生成的选项，允许你预先生成页面，在构建时将数据整合进HTML。这样做的好处是能够生成可以直接由CDN服务的、快速且成本低廉的页面。
     - 例如，如果我负责一个营销网站，其内容不经常改变，我可能会选择Next.js的静态站点生成功能，以便提供快速的加载时间并减少服务器成本。

3. **路由**：
   - **Next.js** 提供了一个基于文件系统的路由系统，你可以通过在`pages`文件夹中添加JS/TS文件来自动创建路由。这简化了路由的配置。
     - 例如，增加一个名为`about.js`的页面，Next.js会自动将其关联到`/about`这个URL路径。
   - **Create React App** 没有内建的路由系统，通常需要使用像React Router之类的第三方库来处理路由。

4. **构建和启动速度**：
   - **Next.js** 由于其功能更为丰富，可能在构建和启动时比CRA稍微慢一些，特别是在大型项目中。
   - **Create React App** 通常启动得更快，这对于小型项目和原型设计可能更有优势。

5. **设置和配置**：
   - **Next.js** 预设了很多配置，比如Webpack和Babel的配置，这为开发者提供了便利，但同时也可能对想要更细粒度控制的开发者造成限制。
     - 例如，我在工作中使用Next.js进行过一个项目，该项目受益于Next.js的预设配置，我们不需要花太多时间来配置Webpack。
   - **Create React App** 提供一个相对简单的起步体验，但如果你需要自定义配置（如Webpack），你可能需要'eject'，这会暴露所有的配置文件，从而允许更深层次的配置。

6. **API路由**：
   - **Next.js** 提供了API路由的功能，允许你在同一个项目中创建API端点，这对于构建全栈应用非常方便。
     - 举例来说，如果我需要构建一个应用并且希望前端和后端紧密集成，我可以在`pages/api`目录中直接添加API路由，而无需另外创建一个后端服务。

7. **社区和生态**：
   - 虽然这两个
工具各自拥有庞大、活跃的社区，但是由于Next.js提供了更多的内建功能，它的生态系统可能相对于Create React App来说更为复杂且多样化。例如，Next.js社区中包含了更多关于服务端渲染和静态站点生成的最佳实践讨论，同时也有更多针对性能优化、SEO以及API路由管理的资源。

8. **部署和托管**：
   - **Next.js** 设计时就考虑了与Vercel（由同一开发团队维护）的无缝集成，使得部署Next.js应用变得非常简易。尽管如此，Next.js应用也可以部署在其他支持Node.js的平台上。
   - **Create React App** 生成的静态文件可以轻松地部署在任何可以托管静态文件的服务上，如GitHub Pages、Netlify或Vercel等。

9. **开箱即用的功能**：
   - **Next.js** 提供了许多开箱即用的功能，如图片优化（`next/image`）、国际化（i18n）路由、环境变量的支持等。
   - **Create React App** 更专注于提供一个干净、无预设的React环境，这意味着需要额外的工作来集成上述功能。

10. **灵活性与控制**：
    - **Next.js** 在提高开发效率的同时，牺牲了一定程度的灵活性。如果默认的配置不满足需求，可能需要更多时间来理解和修改内部设置。
    - **Create React App** 则提供了一个较为灵活的起点，尤其是在执行`eject`之后，开发者可以对构建等细节有完全的控制。

总结来说，Next.js和Create React App各自适合不同的场景和需求。Next.js更倾向于那些需要服务端渲染、静态站点生成和API路由等全栈特性的复杂应用，而Create React App则可能更适合那些需要快速启动并希望保持较高灵活性的简单客户端应用。选择哪个框架/工具，需要根据项目的具体需求、开发团队的技术栈以及对SEO和性能的考量来决定。

Next.js相关问题