Je souhaite accéder au message précédent et au message suivant d'un article de blog particulier.
Considérez cet exemple de Gatsby - https: // gatsby- starter-blog-demo.netlify.com/my-second-post/
Il a 2 liens en bas de page -
← Hello World qui est un article précédent et New Beginnings → qui est un article suivant
Pour utiliser cela de manière dynamique, j'ai besoin d'accéder au slug du message, mais comment puis-je l'obtenir? C'est simple dans Gatsby grâce à l'utilisation de GraphQL.
Mais, dans Next, je dois utiliser hack précédent uniquement pour obtenir des messages. Comment vais-je obtenir des slugs afin de pouvoir implémenter les messages précédents et suivants dans mon blog particulier?
Même Le propre blog de JS suivant n'a pas de liens Message suivant et Article précédent.
Consultez tout message sur le blog de Next JS et vous trouverez un Bouton Retour au blog mais pas de post précédent ni de bouton suivant.
3 Réponses :
La pagination est assez simple. Vous pouvez utiliser la méthode static async getInitialProps , pour obtenir la page demandée à partir de la requête.
Ensuite, vous pouvez soit utiliser un bouton avec Router.push au routeur impérativement ou un Link pour acheminer de manière déclarative.
class PaginationTest extends React.Component {
static async getInitialProps ({query: {page = 1}}) {
const data = await fetchPage(page)
return {
page: parseInt(page, 10),
data
}
}
render () {
return (
<div>
// render data
<button
onClick={() => Router.push(`/page=${this.props.page + 1}`)}
disabled={this.props.page <= 1}
>Next Button</button>
<Link href={`/page=${this.props.page + 1}`}>
<a>Next Link</a>
</Link>
</div>
)
}
}
Here is a working codesandbox: https://codesandbox.io/s/6w3k5yzqmn
Ma question est de savoir comment puis-je utiliser Previous Post et Next Post à partir d'un article de blog particulier comme le fait Gatsby. Par exemple, gatsby-starter-blog-demo.netlify.com/ my-second-post contient des liens vers Article précédent (Hello World) et Message suivant (New Beginnings) . Je veux faire de même avec Next JS Blog :)
Étant donné que vous générez un site statique, je suppose que vous ne vous souciez de le comprendre que du côté serveur de Next.JS. Pour cela, vous devez essentiellement écrire une fonction appelée getNextPost (current) qui prend votre message actuel (soit juste le nom de fichier ou un objet complet) et scanne votre répertoire de messages pour le suivant. Pour le côté serveur de Next.JS, vous êtes dans Node, vous pouvez donc simplement utiliser le package fs pour analyser le système de fichiers.
Idéalement, cela signifie que chaque nom de fichier doit avoir un horodatage ou un préfixe similaire (par exemple 2019-02-22_13-45-53-my-second-post.html ), de cette façon vous pouvez utilisez simplement un tri simple pour déterminer quel sera le prochain article. Sinon, vous auriez besoin d'analyser chaque fichier de publication pour extraire les informations de date de cette façon (je pense que c'est ainsi que fonctionne Gatsby, c'est certainement ce que fait Hugo).
Quoi qu'il en soit, je vous recommande d'analyser une fois tous vos fichiers de publication dans un cache en mémoire afin que vous n'ayez pas à analyser le répertoire des messages à chaque fois.
le site ne sera pas statique, mais pour simplifier la question, j'ai dit statique. ce serait plus comme un marché comme ThemeForest avec un blog et tout ce qui suit. le problème avec l'approche d'horodatage est le nom de fichier étrange. Je préfère garder l'horodatage dans les premiers jours. J'aime la façon dont Gatsby aborde ce problème avec plus de simplicité. Je pense que le package fs devrait le faire, je vais donc l'essayer et accepter la réponse une fois que j'ai terminé :)
en fait, son approche est celle que j'utilise maintenant.
Tout d'abord, vous devez vous demander ce que signifient "message précédent" et "message suivant" et comment vous les trouvez.
Pouvez-vous exprimer cela? Répondre à cette question résoudra la plupart de votre problème et n'est pas lié à Next.js.
Une fois que vous avez clarifié cela, la réponse à la question "Comment ajouter un lien de publication précédent et suivant" est un mélange de ce que mrvdot et lipp ont offert.
Créez un fonction getNextPost et getPreviousPost . En supposant que vous ayez des ID incrémentiels, un exemple simple (et non robuste) serait:
class Post extends React.Component {
static async getInitialProps ({id}) {
const post = await getPost(id)
const previousPost = await getPreviousPost(id)
const nextPost = await getNextPost(id)
return {
post,
previousPost,
nextPost,
}
}
getPreviousPost = currentPostId => getPost(currentPostId - 1)
getNextPost = currentPostId => getPost(currentPostId + 1)
render ({post, previousPost, nextPost}) {
return (
<div>
<h1>{post.title}</h1>
<p>{post.content}</p>
<Link href={previousPost.url}><a>Previous post</a></Link>
<Link href={nextPost.url}><a>Next post</a></Link>
</div>
)
}
}
Ensuite, une fois que vous avez cela, vous pouvez rechercher vos messages précédents et suivants en plus de votre message actuel dans getInitialProps de votre composant Post
const getPreviousPost = currentPostId => getPost(currentPostId - 1) const getNextPost = currentPostId => getPost(currentPostId + 1)
Ou quelque chose comme ça. Cela a-t-il un sens?
Je suppose que je ne comprends toujours pas votre problème ... disons que vous avez une page / route "/ blog? ArticleId = 123", et étant donné que vous avez les identifiants de l'article précédent et suivant, vous pouvez placer deux liens vers "/ blog? articleId = prevId" et "/ blog? articleId = nextId", n'est-ce pas. Ou est-ce que vos articles de blog sont des pages réelles dans le répertoire "/ pages / article1", ..., "/ pages / articleN"?
Je veux dire que vous semblez avoir un blog statique qui n'utilise pas d'API pour récupérer les articles ... correct?
Oui, c'est un blog statique vivant sur mon système de fichiers. Il crachera un site statique qui aura des URL comme
/ blog / my-new-post,/ blog / another-post, etc. et pas comme vous l'avez dit dans le commentaire ci-dessus. C'est ma question :)