Is it possible to add .html at the end of the URL as you like while using NuxtJS or NextJS?

user_6439405 0
Viewed 433

I am currently planning to develop a web application using NuxtJS/NextJS framework with SSR Universal architecture, I am facing difficulties related to SEO, because previously my project was written in .NET , so all URLs have .html at the end..

Ex:

  • domain.com/hotels (this is Cate)
  • domain.com/hotels-5-star.html (this is a Sub cate of Hotels Cate)

The example above is specific to my problem, which means that according to Google, the shorter the URL, the better, so my pages have all been shortened to a single "/", however because of the structure page has 2 hierarchies, Cate and Sub cate, so for Google to distinguish this, the URL (sub cate) must insert .html at the end.

Can I use NuxtJS/NextJS build pages with the same URL as above?, I have researched but found a specific solution, maybe my experience is not much so I need the help of experts on NuxtJS/NextJS

nuxt.js server-side-rendering vue.js next.js
3 Answers

yeah, in nuxtjs, you can use @nuxtjs/router to custom your router path like this

nuxt.config.js

buildModules: [
    '@nuxtjs/router'
]

router.js

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const page = path => () => import(`./pages/${path}.vue`).then(m => m.default || m);

const routes = [
    {
        path: '/hotels-:star-star.html',
        name: 'hotels',
        props: true,
        component: page('hotels')
    }
];
export function createRouter(){
    return new VueRouter({
        routes
    });
}

pages/hotels.vue

<template>
    <main>
        {{ star }}
    </main>
</template>

<script>
export default{
    props: {
        star: {
            type: Number
        }
    }
}
</script>

enter image description here

user_105190690

I'm not an expert in SEO, but I would just use 5-star as a query in domain.com/hotels

This would mean you could use the single hierarchy like so:

domain.com/hotels?rating=5-stars

As far as using html files as URL routing for the site, the nuxt generate property builds the project into html files which is under your control. The structure comes from what you set in the pages directory

user_22178010

Nowadays, all modern apps are having some pretty URLs looking like domain.com/hotels/
With a trailing slash at the end. Don't mix and match them. Either put them everywhere or nowhere.
SEO-wise, trailing slashes do not matter, you can let them.

Modern JS frameworks are doing a great job at this, and they know that if you reach domain.com/hotels/, you're actually wanting to serve the .html (aka the .vue) file in it, no need to add it.

In Nuxt.js, the directory structures would look like this:

-- pages
---- hotels.vue

or

-- pages
---- hotels
------ index.vue

As for this

the shorter the URL, the better

Don't stress it too much, you don't need to make super shorts paths neither.

Just keep it semantic and logic. Having domain.com/h5s will be super bad.
Also, having domain.com/hotels/5-stars or domain.com/hotels/?rating=5 is totally fine.
Basically, make them somehow readable for the end user.

PS: be aware that Next.js >> React and Nuxt.js >> VueJS.

user_88165850
Related