Syntax comparison of Next-js and nuxt.js

React.js and vue.js are good frameworks. And next.js and Nuxt.js even take them to the Next level, helping us create applications with less configuration and better maintainability. However, if you have to switch between frameworks a lot, you can easily forget the syntax in the other framework after digging into it. In this article, I summarize the basic syntax and scenarios for these frameworks and then list them side by side. I hope this will help us to master grammar quickly.

Previous article: Side-by-side comparison of React. Js and vue.js syntax

Assets

Next.js

/*
|- public/
|-- my-image.png
*/
function MyImage() {
  return <img src="/my-image.png" alt="my image" />;
}
Copy the code

Nuxt.js

Assets. By default, Nuxt uses vue-loader, file-loader, and url-loader to provide powerful assets services.

<! -- |- assets/ |- image.png -->
<img src="~/assets/image.png" alt="image" />
Copy the code

Static: automatic service

<! -- |- static/ |- image.png -->
<img src="/image.png" alt="image" />
Copy the code

The basic routing

Next.js

| - pages / | - index. Js - > href ="/"| - blog/index. Js - > href ="/blog"
Copy the code

Nuxt.js

| - pages / | - index. Vue - > href ="/"| - blog/index. Vue - > href ="/blog"
Copy the code

Dynamic routing

Next.js

| - 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)
Copy the code

Nuxt.js

| - pages / | - blog / [slug]. Vue - > href ="/blog/:slug"(eg. / blog/hello - world) | - _username / _option. Vue - > href ="/:username/:option" (eg. /foo/settings)
Copy the code

Link

Next.js

import Link from "next/link";
function Home() {
  return (
    <Link href="/">
      <a>Home</a>
    </Link>
  );
}
Copy the code

Nuxt.js

<template>
  <nuxt-link to="/">Home page</nuxt-link>
</template>
Copy the code

Fetch-On-Server

Next.js

GetInitialProps can only be used in the default export for each page

< Next.js 9.3 (class component)

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...}}Copy the code

< Next.js 9.3 (function component)

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 } };
};
Copy the code

> = Next. Js 9.3

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;
Copy the code

Nuxt.js

<template>
  <div v-if="$fetchState.error">Some errors have occurred 😭</div>
  <div v-if="$fetchState.pending">Loading...</div>
  <div v-else>
    <h1>{{ post.title }}</h1>
    <pre>{{ post.body }}</pre>
    <button @click="$fetch">The refresh</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>
Copy the code

Layout

Next.js

./pages/_app.js: automatically applies to all pages

export default function MyApp({ Component, pageProps }) {
  return( <React.Fragment> <MyHeader /> <Component {... pageProps} /> <MyFooter /> </React.Fragment> ); }Copy the code

Nuxt.js

Layouts /with-header-footer.vue: Creates a layout

<template>
  <div>
    <MyHeader />
    <nuxt />
    <MyFooter />
  </div>
</template>
Copy the code

Pages /index.vue: indicates the application layout

<template>
  <! -- Your template -->
</template>
<script>
  export default {
    layout: "with-header-footer"};</script>
Copy the code

Error page

Next.js

pages/_error.js

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;
Copy the code

Nuxt.js

layouts/error.vue

<template>
  <div class="container">
    <h1 v-if="error.statusCode === 404">Page not found</h1>
    <h1 v-else>An error occurs</h1>
    <nuxt-link to="/">Home page</nuxt-link>
  </div>
</template>
<script>
  export default {
    props: ["error"].layout: "blog".// You can set custom layout for error pages
  };
</script>
Copy the code

Meta-Tag

Next.js

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>
  );
}
Copy the code

Nuxt.js

<template>
  <h1>{{ title }}</h1>
</template>
<script>
  export default {
    data() {
      return {
        title: "Hello World!"}; }, head() {return {
        title: this.title,
        meta: [
          // To avoid duplicate meta tags in child components, use the HID key to set unique identifiers
          {
            hid: "description".name: "description".content: "My custom description",}]}; }};</script>
Copy the code

Context

Next.js

GetInitialProps can only be used in the default export for each page

function Page({ data }) {
  // Render data...
}
Page.getInitialProps = async (context) => {
  const { pathname, query, asPath, req, res, err } = context;
  // pathName - The current path, which is the page path in /pages.
  // query - Parses the query string part of the URL as an object
  // asPath - A string of actual paths (including queries) to display in the browser
  // req - HTTP request object (server only)
  // res - HTTP response object (server only)
  // err - An error object if any errors are encountered during rendering.
  return { props: { project: "next"}}; };Copy the code

Nuxt.js

export default {
  asyncData(context) {
    / / the general keys
    const {
      app,
      store,
      route,
      params,
      query,
      env,
      isDev,
      isHMR,
      redirect,
      error,
    } = context;
    // Server side
    if (process.server) {
      const { req, res, beforeNuxtRender } = context;
    }
    / / the client
    if (process.client) {
      const { from, nuxtState } = context;
    }
    return { project: "nuxt"}; }};Copy the code

CLI

React.js: create-react-app

npx create-react-app react-template
Copy the code

Next.js: create-next-app

npx create-next-app next-template
Copy the code

Vue.js: vue-cli

yarn global add @vue/cli
vue create vue-template
Copy the code

If you have inspiration and help, you can click a concern, favorites, forwarding, also can leave a message to discuss, this is the biggest encouragement to the author.

About the author: Web front-end engineer, full stack development engineer, continuous learner.

Pay attention to the public number “front-end foreign language selection”, private reply: gift package, send a network of high-quality video courses network disk information, can save you a lot of money!