web-dev-qa-db-fra.com

Comment gérer les barres obliques de fin dans les itinéraires next.js?

J'essaie de configurer une application next.js, mais j'ai du mal à gérer les itinéraires avec une barre oblique de fin. Ainsi, par exemple, si j'ai une structure de pages comme celle-ci:

pages
 - index.js
 - blog
   - index.js
   - [slug].js

puis aller à / me donne la base index.js, aller à /blog Donne moi blog/index.js, et aller à /blog/my-post Donne moi blog/[slug].js - jusqu'ici tout va bien.

Mais aller à /blog/ me donne une erreur 404, et il semble qu'il n'y ait aucun moyen de gérer cela sans remplacer entièrement le routeur next.js - je ne peux même pas rediriger /blog/ à /blog. Y a-t-il un moyen de contourner cela, ou ai-je besoin d'un routeur personnalisé? Existe-t-il un moyen d'étendre le routeur next.js d'une manière qui me permettra de les gérer, sans le remplacer entièrement?

next.js
5
futuraprime

MISE À JOUR: Si vous utilisez next export que vous pouvez résoudre le problème en ajoutant exportTrailingSlash à votre next.config.js

Au moment de la rédaction de ce document, il semble qu'il n'y ait aucun moyen de résoudre ce problème sans définir votre propre serveur personnalisé.

Réponse précédente:

Vous devez créer un nouveau fichier blog.js ci-dessous:

enter image description here

Avec le server.js suivant

const express = require('express')
const next = require('next')

const PORT = process.env.PORT || 3000;

const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

app
  .prepare()
  .then(() => {
    const server = express()

    server.get('/blog', (req, res) => {
      const actualPage = '/blog'
     // const queryParams = { title: req.params.id }
      app.render(req, res, '/blog', {})
    })
    server.get('/blog/:id', (req, res) => {
      const actualPage = '/blog/[id]'
      const queryParams = { title: req.params.id }
      app.render(req, res, actualPage, queryParams)
    })

    server.get('*', (req, res) => {
      return handle(req, res)
    })

    server.listen(PORT, err => {
      if (err) throw err
      console.log(`> Ready on http://localhost:${PORT}`)
    })
  })
  .catch(ex => {
    console.error(ex.stack)
    process.exit(1)
  })

node server.js devrait démarrer votre serveur et vous auriez le mappage dont vous avez besoin.

Remarque, blog/index.js n'est pas utilisé dans cet exemple.

1
eenagy

Vous pouvez l'ajouter à votre fichier _app.js

MyApp.getInitialProps = async ctx => {
  const pathAndQueryDivided = ctx.ctx.req.url.split('?');
  if (pathAndQueryDivided[0].endsWith('/')) {
    const urlWithoutEndingSlash = pathAndQueryDivided[0].replace(/\/*$/gim, '');

    ctx.ctx.res.writeHead(301, {
      Location: urlWithoutEndingSlash + (pathAndQueryDivided.length > 1 ? `?${pathAndQueryDivided[1]}` : ''),
    });
    ctx.ctx.res.end();
    return {};
  }


  const initialProps = await App.getInitialProps(ctx);

  return {
      ...initialProps,
  };
};
  • App.getInitialProps est appelé premier côté serveur
  • Il divise divise le chemin d'accès et les paramètres de requête parce que nous voulons seulement savoir si l'URL se termine par une barre oblique
  • Il demande si l'URL se termine par une barre oblique
  • Il remplace la dernière barre oblique de l'url par rien
  • Il vous redirige vers l'url sans la barre oblique + les paramètres de requête s'il y en a
0
Javier Goldschmidt

Je n'ai pas de solution à cela. C'est toujours un énorme problème. Cependant, j'ai un hack très horrible que j'ai utilisé pour contourner ce problème dans Next.js 9.x.x

Dans mon /pages/_error.js J'ai ajouté le code suivant:

FourOhFour.getInitialProps = ({asPath, res}: any): any => {
    const supportedPaths = [
        '/page1/',
        '/page2/',
        '/page3/'
    ];

    for (let i = 0, l = supportedPaths.length; i < l; i++) {
        const path = supportedPaths[i];
        if (asPath === path) {
            res.writeHead(301, {Location: path.substring(0, path.length - 1)});
            return res.end();
        }
    }

    return {};
};

Cela garantira que toutes les pages données seront redirigées vers le bon chemin.

Cela vous oblige à spécifier manuellement toutes les URL de votre page qui pourraient ne pas fonctionner pour vous - mais au moins c'est quelque chose.

0
Ev Haus