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!