Any clue how can I add Pagination to nextjs13 , it is static pagination
Unanswered
Basset Bleu de Gascogne posted this in #help-forum
Basset Bleu de GascogneOP
I am trying to understand is to how can I add pagination to my site , I have the content and I dont want to make the pagination dynamic it should be static. I tired using React Pagination library that did not seem to work
41 Replies
you can try defining it by using generateStaticParam of how many pages it have and their data,
and use dynamic route for your page number
and use dynamic route for your page number
thats the SSR way
but if you want the client way, you need to make sure that your route doesn't have dynamic functions or dynamic fetches
so that the route stays static
@aardani you can try defining it by using generateStaticParam of how many pages it have and their data,
and use dynamic route for your page number
Basset Bleu de GascogneOP
So I have defiend the number of pages and gotten the number of post
export default async function AboutPage(){
const [currentPage, setCurrentPage] = useState(1);
const [postsPerPage] = useState(8)
const indexOfLastPage = currentPage * postsPerPage;
const indexOfFirstPage = indexOfLastPage - postsPerPage;
const notes = await getNotes()
const currentPosts = notes.slice(indexOfFirstPage, indexOfLastPage)
function changePage({currentPage}){
setCurrentPage(currentPage + 1);
}
return (
<>
<div className="flex flex-col mt-20px">
<div className="flex items-center justify-center w-full">
<div className="grid grid-cols-4 gap-[50px] ">
<Page currentPage={currentPage} currentPost={currentPosts} />
{currentPosts.map((note) => {
return <Notes key={note.id} note={note} />
})}
</div>
</div>
</div>
</>
)
}
function Page({currentPosts,currentPage}){
return (
<>
<Link href={`/about/${currentPage}/${currentPosts}`} ></Link>
</>
);
}
function Notes({note}) {
const {userId,id,title,body} = note
return (
<>
<Link href={`/about/${id}`} className="block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
<h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">{title}</h5>
<p className="font-normal text-gray-700 dark:text-gray-400">{body}</p>
</Link>
</>
)
}This is the program
I am trying to understand hwo can I make my page change
I have defined a folder named currentPage
the currentPost will only display the certain amount of pages
is this in app router
@DirtyCajunRice | AppDir is this in app router
Basset Bleu de GascogneOP
In a folder called about
@Basset Bleu de Gascogne In a folder called about
is it in /app or /pages.
@DirtyCajunRice | AppDir is it in /app or /pages.
Basset Bleu de GascogneOP
its in seprate folder
@Basset Bleu de Gascogne its in seprate folder
what separate folder
so ure using both
/app and /pages folder?Basset Bleu de GascogneOP
@aardani so ure using both `/app` and `/pages` folder?
Basset Bleu de GascogneOP
this is how it is
i see how it is
so are you trying to implement pagination in
/app folder or /pages folder?@aardani so are you trying to implement pagination in `/app` folder or `/pages` folder?
Basset Bleu de GascogneOP
so I this is from another project but hte layout is same , I have a folder named Notes in which I have file called page that contains the main code to display the 8 news card
each news card upon clicking takes to a new page that displays the news as a whole
which I am able to get
however I was initially trying to get pagination as static in the same page.js file of notes
the
/app folder have different implementation from the /pages folder. Or commonly known as App Routing vs Pages Routing. so im asking you for the 5th time, do you want to implement the pagination using app routing or pages routingBasset Bleu de GascogneOP
page routing
sorry this is my first time using next js
adn worst part I started with 13
the pages routing continues to work in next.js 13
that being said since i only knows the app dir i can no longer help you in this matter
Basset Bleu de GascogneOP
No worries thanks alot
@aardani that being said since i only knows the app dir i can no longer help you in this matter
Pembroke Welsh Corgi
i'm building a blog with the app directory and contentful. i want to add pagination to it and also filter the bloglist by tag/category.
i.e. I would have routes like
How do i implement the folder structure and pagination for something like this.
This is what my current project structure look like but I feel it can be better
Thanks
i.e. I would have routes like
blog/category or blog/1 or blog/category/1 and ofcourse blog/this-slug. How do i implement the folder structure and pagination for something like this.
This is what my current project structure look like but I feel it can be better
blog/page/1/tag/tag-name/blog
page.tsx
/[slug]
page.tsx
/page
page.tsx
/[page]
page.tsx
/tag
[tag]
page.tsxThanks
@aardani Is "category" a fixed name or a variable?
Pembroke Welsh Corgi
it is a variable
So its more like /blog/[categoryname]/[id] ?
@aardani So its more like /blog/[categoryname]/[id] ?
Pembroke Welsh Corgi
yeah, but id will be [pageNumber] in this case
Anyhow please create a new thread since its different from the problem of the original post
@aardani Anyhow please create a new thread since its different from the problem of the original post
Pembroke Welsh Corgi
okay