Desenvolvedor de Software e Especialista em Tecnologia da Informação

URLs Amigáveis com JavaScript Puro: Criando uma SPA sem frameworks usando a History API 🚀

Seu projeto ainda exibe páginas como contato.html, sobre.html ou produtos.html? 😬 Com apenas JavaScript Puro você consegue criar URLs amigáveis usando a History API, deixando seu projeto com aparência muito mais profissional, sem depender de React, Vue, Angular ou qualquer framework. Neste guia completo, você vai aprender como transformar URLs com extensões em URLs limpas e profissionais, criando uma Single Page Application (SPA) utilizando apenas recursos nativos do navegador.

📅  12 de junho de 2026
⏱️  15 min
🏷️  Javascript
📚 artigos +

Como criar URLs amigáveis com JavaScript Puro (sem React) 🚀

Com apenas JavaScript Puro você consegue criar URLs amigáveis usando a History API, deixando seu projeto com aparência muito mais profissional, sem depender de React, Vue, Angular ou qualquer framework.

URL Amigável JavaScript Puro History API SPA Single Page Application JavaScript Moderno Desenvolvimento Web Programador Iniciante Aprender JavaScript RogerioPontesTI

"A diferença entre um site amador e um site profissional muitas vezes está nos pequenos detalhes. Uma URL limpa, sem extensões .html, transmite profissionalismo e melhora a experiência do usuário. Com a History API do JavaScript, você pode transformar seu projeto em uma SPA sem depender de frameworks."

🚀 O que você vai aprender neste artigo

  1. O que são URLs amigáveis — conceitos e por que elas são importantes
  2. O problema das URLs com extensões — por que .html no final é amador
  3. O que é a History API — a ferramenta nativa do navegador para manipular URLs
  4. Como criar uma SPA com JavaScript puro — roteamento sem frameworks
  5. Como configurar o Apache e Nginx — para suportar URLs amigáveis em produção
  6. Boas práticas de desenvolvimento web — código limpo e organizado
  7. Exemplos práticos — código completo para você copiar e colar

📌 Conceitos abordados

  • URL Amigável — URLs limpas sem extensões ou parâmetros desnecessários
  • History API — API nativa do navegador para manipular o histórico
  • SPA (Single Page Application) — aplicação que carrega uma única página e atualiza o conteúdo dinamicamente
  • Roteamento — sistema de navegação entre páginas de uma aplicação
  • JavaScript Puro — código JavaScript sem frameworks ou bibliotecas
  • Manipulação do DOM — atualização dinâmica de conteúdo
  • Configuração de Servidor — Apache e Nginx para suportar SPA

❌ O problema das URLs com extensões

Quando você está aprendendo JavaScript ou começando no desenvolvimento web, é comum criar páginas com extensões como .html. O resultado são URLs como:

  • site.com/contato.html
  • site.com/sobre.html
  • site.com/produtos.html

Essas URLs funcionam, mas têm algumas desvantagens:

  • Parecem amadoras — sites profissionais usam URLs limpas
  • Dificultam o SEO — palavras-chave na URL são mais importantes que extensões
  • Compartilhamento complicado — URLs longas com extensões não são atraentes
  • Manutenção difícil — mudar a estrutura exige renomear arquivos
❌ Antes — URLs com extensões
site.com/contato.html
site.com/sobre.html
site.com/produtos.html
✅ Depois — URLs amigáveis
site.com/contato
site.com/sobre
site.com/produtos

🔍 O que é a History API?

A History API é uma interface nativa do navegador que permite manipular o histórico de navegação sem recarregar a página. Com ela, você pode:

  • Adicionar estados ao histórico
  • Alterar a URL sem recarregar a página
  • Navegar entre estados com os botões voltar/avançar
  • Atualizar o conteúdo da página dinamicamente

Os principais métodos da History API são:

  • history.pushState() — adiciona um novo estado ao histórico
  • history.replaceState() — substitui o estado atual
  • history.popstate — evento disparado quando o usuário navega pelo histórico
HISTORY API 

// Adiciona um novo estado ao histórico
history.pushState(null, '', '/sobre');

// Escuta mudanças no histórico (botão voltar/avançar)
window.addEventListener('popstate', () => {
    navegar(location.pathname);
});

🏗️ Criando uma SPA com JavaScript Puro

Estrutura do projeto

ESTRUTURA
terminal — projeto
amigaveljs/ ├── css/ │ └── style.css ├── js/ │ ├── app.js │ ├── router.js │ └── renderer.js ├── templates/ │ ├── home.html │ ├── sobre.html │ ├── contato.html │ └── 404.html └── index.html rogerio@servidor:~$

1. HTML - index.html

INDEX.HTML 

<!DOCTYPE html>
<html lang="pt-BR">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Página Inicial</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <link rel="stylesheet" href="./css/style.css">
    <script type="module" src="./js/app.js"></script>

</head>

<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark shadow">
        <div class="container">
            <a class="navbar-brand" href="/">Mini Router JS</a>
            <div class="navbar-nav ms-auto">
                <a href="/" class="nav-link">Página Inicial</a>
                <a href="/sobre" class="nav-link">Sobre</a>
                <a href="/contato" class="nav-link">Contato</a>
            </div>
        </div>
    </nav>

    <main class="container">
        <section id="app"> </section>
    </main>
</body>

</html>

2. JavaScript - js/app.js

APP.JS 

import { navegar } from "./router.js";

document.addEventListener("click", e => {
    const LINK = e.target.closest("a");

    if (!LINK) {
        return;
    }

    const HREF = LINK.getAttribute("href");

    if (!HREF.startsWith("/")) {
        return;
    }

    e.preventDefault();
    navegar(HREF);
});

window.addEventListener("popstate", () => {
    navegar(location.pathname);
});

navegar(location.pathname);

3. JavaScript - js/router.js

ROUTER.JS 

import { renderizar } from "./renderer.js";

const ROTAS = {
    "/": {
        template: "/templates/home.html",
        titulo: "Home"
    },
    "/sobre": {
        template: "/templates/sobre.html",
        titulo: "Sobre"
    },
    "/contato": {
        template: "/templates/contato.html",
        titulo: "Contato"
    },
    "/404": {
        template: "/templates/404.html",
        titulo: "404"
    }
};

export async function navegar(url){
    const ROTA = ROTAS[url];

    if (!ROTA) {
        navegar("/404");
        return;
    }

    history.pushState({}, "", url);

    document.title = ROTA.titulo;
    await renderizar(ROTA.template);
}

4. JavaScript - js/renderer.js

RENDERER.JS 

export async function renderizar(caminho){
    const APP = document.querySelector("#app");
    const RESPOSTA = await fetch(caminho);
    APP.innerHTML = await RESPOSTA.text();
}

⚙️ Configurando o servidor para URLs amigáveis

Para que as URLs amigáveis funcionem em produção, o servidor precisa redirecionar todas as requisições para o index.html. Isso permite que o JavaScript gerencie o roteamento.

Apache — .htaccess

APACHE
.htaccess
RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.html [L]

Este arquivo .htaccess faz o seguinte:

  • RewriteEngine On — ativa o motor de reescrita
  • RewriteCond %{REQUEST_FILENAME} !-f — se não for um arquivo existente
  • RewriteCond %{REQUEST_FILENAME} !-d — se não for um diretório existente
  • RewriteRule . /index.html [L] — redireciona para index.html

Nginx — configuração

NGINX
nginx.conf
server { listen 80; server_name localhost; root /CAMINHO/DO/SEU/PROJETO; index index.html; location / { try_files $uri $uri/ /index.html; } }
🔍 Explicando a configuração do Nginx
  • root /CAMINHO/DO/SEU/PROJETO — define o diretório raiz do projeto
  • index index.html — define o arquivo padrão
  • try_files $uri $uri/ /index.html — tenta servir o arquivo, o diretório ou redireciona para index.html

Testando a configuração do Nginx

TESTE
terminal — nginx
rogerio@servidor:~$ sudo nginx -t nginx: syntax is ok nginx: test is successful rogerio@servidor:~$ sudo systemctl restart nginx

⏱️ Capítulos do vídeo

  • 00:00 — O problema das URLs com .html
  • 00:05 — Introdução à History API
  • 00:10 — Criando o roteador em JavaScript puro
  • 00:15 — Configurando o servidor (Apache/Nginx)
  • 00:22 — Testando as URLs amigáveis
  • 00:28 — Conclusão e dicas finais

🎯 Conclusão

Criar URLs amigáveis com JavaScript puro é uma habilidade essencial para qualquer desenvolvedor web. Com a History API, você pode transformar seu projeto em uma SPA profissional sem depender de frameworks.

Neste artigo, você aprendeu:

  • ✅ O que são URLs amigáveis e por que elas são importantes
  • ✅ Como usar a History API para manipular URLs
  • ✅ Como criar um roteador em JavaScript puro
  • ✅ Como configurar o Apache e Nginx para suportar SPA
  • ✅ Boas práticas de desenvolvimento web

💡 Lembre-se: A History API é a base de frameworks como React Router, Vue Router e Angular Router. Entender como ela funciona por baixo dos panos vai te ajudar a se tornar um programador mais completo e profissional.

🤔 O que você achou?

💬 Quer aprender JavaScript do ZERO? Comece agora a escrever seu primeiro código e seus fundamentos!

❓ FAQ: Perguntas Frequentes sobre URLs Amigáveis e History API

É uma URL limpa, sem extensões como .html ou parâmetros desnecessários, facilitando a leitura para usuários e mecanismos de busca.

Sim. Com a History API é possível alterar a URL e navegar entre páginas sem utilizar frameworks como React, Vue ou Angular.

É uma API nativa do navegador que permite alterar a URL da página sem realizar um recarregamento completo (reload).

Sim. A History API é uma das bases para construir uma Single Page Application utilizando apenas JavaScript puro.

Funciona em praticamente todos os navegadores modernos, como Chrome, Edge, Firefox, Safari e Opera.

Sim. Em produção, Apache, Nginx ou outro servidor deve redirecionar todas as rotas para o arquivo principal da aplicação, evitando erros 404 ao atualizar a página.

Além de deixar o projeto mais profissional, melhora a experiência do usuário, facilita o compartilhamento dos links e aproxima a estrutura utilizada pelos grandes frameworks modernos.

Para muitos projetos, sim. A combinação de History API, Fetch API e manipulação do DOM permite construir aplicações completas sem depender de frameworks.

A History API cria URLs limpas, enquanto o Hash Routing adiciona # na URL. A primeira é a abordagem utilizada pela maioria das aplicações modernas.

Sim. Mesmo utilizando frameworks, entender a History API ajuda a compreender como React Router, Vue Router e outras bibliotecas funcionam internamente.

🎬 Assista ao Vídeos completo sobre URL Amigável sem Framework e sem Backend

Muita gente acredita que criar URLs amigáveis só é possível utilizando frameworks ou algum tipo de back-end. Mas isso não é verdade. Neste vídeo você vai desvendar o segredo por trás das URLs amigáveis utilizando apenas JavaScript puro, organizando o projeto em módulos, templates HTML e arquivos separados para construir uma navegação moderna, limpa e profissional, sem depender de frameworks, bibliotecas ou back-end..

🔗 Conecte-se Comigo

YouTube Site LinkedIn GitHub Instagram

💬 Você já utilizou a History API ou ainda trabalha com páginas .html na URL? Compartilhe sua experiência nos comentários! 👇

#JavaScript #HistoryAPI #SPA #Frontend #DesenvolvimentoWeb #JavaScriptPuro #SinglePageApplication #WebDeveloper #Programacao #RogerioPontesTI