Principais diferenças entre Next.JS (React) e Nuxt 3 (Vue) com exemplos

rahula

Cover Image for Principais diferenças entre Next.JS (React) e Nuxt 3 (Vue) com exemplos

rahula

Posted December 3, 2023underJavascript

Next.js e Nuxt.js são ambos frameworks para construir aplicações web com React e Vue.js, respectivamente. Embora compartilhem algumas semelhanças, também têm diferenças em termos de configuração, estrutura de pastas e filosofia. Abaixo, separei alguns exemplos de código que encontrei na net para tarefas comuns em Next.js e Nuxt.js, de forma a destacar algumas de suas diferenças e semelhanças.

Rotas

//NEXT.JS
// pages/index.js
import React from 'react';

const HomePage = () => {
  return (
    <div>
      <h1>Página Inicial</h1>
    </div>
  );
};

export default HomePage;

//NUXT
<!-- pages/index.vue -->
<template>
  <div>
    <h1>Página Inicial</h1>
  </div>
</template>

Rotas dinâmicas

//NEXT.JS
// pages/posts/[id].js
import React from 'react';
import { useRouter } from 'next/router';

const Post = () => {
  const router = useRouter();
  const { id } = router.query;

  return (
    <div>
      <h1>Postagem {id}</h1>
    </div>
  );
};

export default Post;

//NUXT
<!-- pages/posts/_id.vue -->
<template>
  <div>
    <h1>Postagem {{ $route.params.id }}</h1>
  </div>
</template>

Rotas de API

//NEXT.JS
// pages/api/hello.js
export default (req, res) => {
  res.status(200).json({ message: 'Olá' });
};

//NUXT
// nuxt.config.js
export default {
  serverMiddleware: ['~/api/hello.js']
}

Layouts

//NEXT.JS
// pages/_app.js
import React from 'react';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

//NUXT
<!-- layouts/default.vue -->
<template>
  <div>
    <Nuxt />
  </div>
</template>

Busca de Dados

//NEXT.JS
// pages/index.js
import React from 'react';
import axios from 'axios';

const HomePage = ({ data }) => {
  return (
    <div>
      <h1>Página Inicial</h1>
      <p>Dados: {data}</p>
    </div>
  );
};

export async function getStaticProps() {
  const response = await axios.get('https://api.exemplo.com/dados');
  return {
    props: {
      data: response.data,
    },
  };
}

export default HomePage;

//NUXT
<!-- pages/index.vue -->
<template>
  <div>
    <h1>Página Inicial</h1>
    <p>Dados: {{ data }}</p>
  </div>
</template>

<script>
export default {
  async asyncData({ $axios }) {
    const response = await $axios.get('https://api.exemplo.com/dados');
    return {
      data: response.data,
    };
  },
};
</script>

Middlewares

//NEXT.JS
// pages/index.js
import React from 'react';

const HomePage = () => {
  return (
    <div>
      <h1>Página Inicial</h1>
    </div>
  );
};

HomePage.getInitialProps = async ({ req, res }) => {
  // Lógica do Middleware
  console.log('Middleware executado');
};

export default HomePage;

//NUXT
<!-- pages/index.vue -->
<template>
  <div>
    <h1>Página Inicial</h1>
  </div>
</template>

<script>
export default {
  middleware({ req, res }) {
    // Lógica do Middleware
    console.log('Middleware executado');
  },
};
</script>

CSS Global

//NEXT.JS
// pages/_app.js
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

//NUXT
// nuxt.config.js
export default {
  css: ['@/assets/styles/globals.css'],
};

Tratamento de erros

//NEXT.JS
// pages/_error.js
import React from 'react';

const ErrorPage = ({ statusCode }) => {
  return (
    <div>
      <h1>Erro {statusCode}</h1>
    </div>
  );
};

export default ErrorPage;

//NUXT
<!-- layouts/error.vue -->
<template>
  <div>
    <h1>Erro {{ error.statusCode }}</h1>
  </div>
</template>

<script>
export default {
  props: ['error'],
};
</script>

Plugins

//NEXT.JS
// pages/_app.js
import MyPlugin from '../plugins/my-plugin';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

//NUXT
// nuxt.config.js
export default {
  plugins: ['~/plugins/my-plugin.js'],
};

Componentes Assíncronos

//NEXT.JS
// pages/index.js
import dynamic from 'next/dynamic';

const DynamicComponent = dynamic(() => import('../components/MyComponent'));

const HomePage = () => {
  return (
    <div>
      <h1>Página Inicial</h1>
      <DynamicComponent />
    </div>
  );
};

export default HomePage;

//NUXT
<!-- pages/index.vue -->
<template>
  <div>
    <h1>Página Inicial</h1>
    <MyComponent />
  </div>
</template>

<script>
export default {
  components: {
    MyComponent: () => import('../components/MyComponent.vue'),
  },
};
</script>

Esses exemplos abrangem vários aspectos da construção de aplicações web, incluindo roteamento, busca de dados, middleware, layouts e mais. Vale lembrar de que os detalhes específicos de implementação podem variar com base nos requisitos do projeto e nas versões dos frameworks, os quais ambos sofrem frequentes atualizações.