Next.js和Nuxt.js的语法比较


React.js和Vue.js都是很好的框架。而且Next.js和Nuxt.js甚至将它们带入了一个新的高度，这有助于我们以更少的配置和更好的可维护性来创建应用程序。但是，如果你必须经常在框架之间切换，在深入探讨另一个框架之后，你可能会轻易忘记另一个框架中的语法。在本文中，我总结了这些框架的基本语法和方案，然后并排列出。我希望这可以帮助我们尽快掌握语法。

上一篇文章：React.js和Vue.js的语法并列比较

Assets

Next.js

1
2
3
4
5
6
7
/*
|- public/
|-- my-image.png
*/
function MyImage() {
  return <img src="/my-image.png" alt="my image" />;
}

Nuxt.js

assets，默认情况下，Nuxt使用vue-loader、file-loader和url-loader来提供强大的assets服务。

1
2
3
4
5
<!--
|- assets/
  |- image.png
-->
<img src="~/assets/image.png" alt="image" />

static，自动服务

1
2
3
4
5
<!--
|- static/
  |- image.png
-->
<img src="/image.png" alt="image" />

基本路由

Next.js

1
2
3
|- pages/
  |- index.js        → href="/"
  |- blog/index.js   → href="/blog"

Nuxt.js

1
2
3
|- pages/
  |- index.vue       → href="/"
  |- blog/index.vue  → href="/blog"

动态路由

Next.js

1
2
3
4
|- pages/
  |- blog/[slug].js           → href="/blog/:slug" (eg. /blog/hello-world)
  |- [username]/[option].js   → href="/:username/:option" (eg. /foo/settings)
  |- post/[...all].js         → href="/post/*" (eg. /post/2020/id/title)

Nuxt.js

1
2
3
|- pages/
  |- blog/[slug].vue         → href="/blog/:slug" (eg. /blog/hello-world)
  |- _username/_option.vue   → href="/:username/:option" (eg. /foo/settings)

Link

Next.js

1
2
3
4
5
6
7
8
import Link from "next/link";
function Home() {
  return (
    <Link href="/">
      <a>Home</a>
    </Link>
  );
}

Nuxt.js

1
2
3
<template>
  <nuxt-link to="/">Home page</nuxt-link>
</template>

Fetch-On-Server

Next.js

getInitialProps只能在每个页面的默认导出中使用

< Next.js 9.3 (class component)

1
2
3
4
5
6
7
8
9
10
11
import fetch from "isomorphic-unfetch";
export default class Page extends React.Component {
  static async getInitialProps(ctx) {
    const res = await fetch(`https://.../data`);
    const data = await res.json();
    return { props: { data } };
  }
  render() {
    // Render data...
  }
}

< Next.js 9.3 (function component)

1
2
3
4
5
6
7
8
9
import fetch from "isomorphic-unfetch";
function Page({ data }) {
  // Render data...
}
Page.getInitialProps = async (ctx) => {
  const res = await fetch(`https://.../data`);
  const data = await res.json();
  return { props: { data } };
};

>= Next.js 9.3

1
2
3
4
5
6
7
8
9
10
import fetch from "isomorphic-unfetch";
function Page({ data }) {
  // Render data...
}
export async function getServerSideProps() {
  const res = await fetch(`https://.../data`);
  const data = await res.json();
  return { props: { data } };
}
export default Page;

Nuxt.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<template>
  <div v-if="$fetchState.error">发生了一些错误 ??</div>
  <div v-if="$fetchState.pending">Loading...</div>
  <div v-else>
    <h1>{{ post.title }}</h1>
    <pre>{{ post.body }}</pre>
    <button @click="$fetch">刷新</button>
  </div>
</template>
<script>
  import fetch from "node-fetch";
  export default {
    data() {
      return {
        post: {},
      };
    },
    async fetch() {
      this.post = await this.$http.$get("xxx");
    },
    fetchOnServer: true,
  };
</script>

Layout

Next.js

./pages/_app.js：自动应用于所有页面

1
2
3
4
5
6
7
8
9
export default function MyApp({ Component, pageProps }) {
  return (
    <React.Fragment>
      <MyHeader />
      <Component {...pageProps} />
      <MyFooter />
    </React.Fragment>
  );
}

Nuxt.js

layouts/with-header-footer.vue：创建布局

1
2
3
4
5
6
7
<template>
  <div>
    <MyHeader />
    <nuxt />
    <MyFooter />
  </div>
</template>

pages/index.vue：应用布局

1
2
3
4
5
6
7
8
<template>
  <!-- 你的模板 -->
</template>
<script>
  export default {
    layout: "with-header-footer",
  };
</script>

错误页面

Next.js

pages/_error.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function Error({ statusCode }) {
  return (
    <p>
      {statusCode
        ? `An error ${statusCode} occurred on server`
        : "An error occurred on client"}
    </p>
  );
}
Error.getInitialProps = ({ res, err }) => {
  const statusCode = res ? res.statusCode : err ? err.statusCode : 404;
  return { statusCode };
};
export default Error;

Nuxt.js

layouts/error.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
  <div class="container">
    <h1 v-if="error.statusCode === 404">Page not found</h1>
    <h1 v-else>一个错误发生</h1>
    <nuxt-link to="/">Home page</nuxt-link>
  </div>
</template>
<script>
  export default {
    props: ["error"],
    layout: "blog", // 你可以为错误页面设置自定义布局
  };
</script>

Meta-Tag

Next.js

1
2
3
4
5
6
7
8
9
10
11
12
import Head from "next/head";
function IndexPage() {
  return (
    <div>
      <Head>
        <title>My page title</title>
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
      </Head>
      <p>Hello world!</p>
    </div>
  );
}

Nuxt.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<template>
  <h1>{{ title }}</h1>
</template>
<script>
  export default {
    data() {
      return {
        title: "Hello World!",
      };
    },
    head() {
      return {
        title: this.title,
        meta: [
          // 为了避免在子组件中使用重复的元标记，可以使用hid键设置唯一的标识符
          {
            hid: "description",
            name: "description",
            content: "My custom description",
          },
        ],
      };
    },
  };
</script>

Context

Next.js

getInitialProps只能在每个页面的默认导出中使用

1
2
3
4
5
6
7
8
9
10
11
12
13
function Page({ data }) {
  // 渲染数据...
}
Page.getInitialProps = async (context) => {
  const { pathname, query, asPath, req, res, err } = context;
  // pathname - 当前路径，这是/pages中的页面路径。
  // query - 将URL的查询字符串部分作为对象进行解析
  // asPath - 浏览器中显示的实际路径（包括查询）的字符串
  // req - HTTP request object (server only)
  // res - HTTP response object (server only)
  // err - 如果在渲染过程中遇到任何错误，则为错误对象。
  return { props: { project: "next" } };
};

Nuxt.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
export default {
  asyncData(context) {
    // 通用keys
    const {
      app,
      store,
      route,
      params,
      query,
      env,
      isDev,
      isHMR,
      redirect,
      error,
    } = context;
    // 服务器端
    if (process.server) {
      const { req, res, beforeNuxtRender } = context;
    }
    // 客户端
    if (process.client) {
      const { from, nuxtState } = context;
    }
    return { project: "nuxt" };
  },
};

CLI

React.js: create-react-app

1
npx create-react-app react-template

Next.js: create-next-app

1
npx create-next-app next-template

Vue.js: vue-cli

1
2
yarn global add @vue/cli
vue create vue-template

如果对你有所启发和帮助，可以点个关注、收藏、转发，也可以留言讨论，这是对作者的最大鼓励。

作者简介：Web前端工程师，全栈开发工程师、持续学习者。

关注公众号 《前端外文精选》，私信回复：大礼包，送某网精品视频课程网盘资料，准能为你节省不少钱！