How to have a dynamic path with dynamic content in nextjs?

Question

I'm building a blog with Nexts where I plan to post a new post every day. I've done this experiment before with Dynamic Routes in nextjs. To do this, according to the instructions, I used getStaticProps and getStaticPaths to display all posts, but this had one problem, and that was that when I submitted a new post, the new post would not be displayed on the screen. Can you suggest a solution to this problem?

I want to create a blog with nextjs that I can see on the page immediately after posting a new post. And the address of each post should be like this:

‍‍https://website.com/blog/post-1

my post page code:

import React from 'react'
import { useRouter } from 'next/router'
import Head from 'next/head';

export async function getStaticPaths() {
  const res = await Api.post(`admin/blog/allPost.php`);
  const postList = res.data.data;
  const paths = postList.map((post) => ({
    params: { id: post.url },
  }))
  return {
    paths,
    fallback: "blocking"
  }
}

export async function getStaticProps({ params }) {
  const id = decodeURI(params.id).trim();
  const res = await Api.get(`admin/blog/post.php?post=${id}`);
  const data = res.data;
  if (res.data.alert!="success") {
    return {
      notFound: true,
    }
  }
  return {
    props: {
            post: data.data[0],
          },
  }
}

function Post(props){
  const router = useRouter()
  const [url,setUrl] = React.useState("");
  const [data,setData] = React.useState(props.post);
  const [posts,setPosts] = React.useState([]);
  const [loading,setLoading] = React.useState(false);

  return (
    <div className="wrapper">
        <Head>
          <meta name="keywords" content={data.keywords} />
          <meta name="author" content={`${data.fName}  ${data.lName}`} />
        </Head>
  
        <div className="page-header clear-filter" filter-color="orange" style={{height:280,minHeight: 0}}>
            <div className="page-header-image" title={data.title} data-parallax="true" 
                  style={{backgroundImage:`url('${data && "https://api.haminoo.ir/"+data.image}')`,height:280}}>
            </div>
            <div className="container">
              <div className="content-center brand">
                <div style={{height:200}}></div>
               
                <h1 className="h1-seo" style={{fontFamily:"Yekan",direction:"rtl"}}>
                  {data && data.title}
                </h1>
              </div>
            </div>
          </div>
          <div className='row' dir='rtl'>
            <div className='col-md-9 col-sx-12'>
                <div className='card card-post' style={{marginTop:67,marginRight:30}}>
                    <div className='blog_description'>
                        <div dangerouslySetInnerHTML={{__html: data && data.description}}></div>
                    </div>
                </div>
            </div>
           
          </div>
          
     
    </div>
  )
}
export default Post

2 ways to handle this 1) When you submit the post re fetch the posts again, you can add this in the .then() method to make sure it fetches the posts again after successful submit, you can show the loader while the data is being fetched. 2) Simply add router.reload() using 'next/router' after successful submit. Make sure the id is in this format post-1, post-2, post-3 then add the folder [id] inside blogs folder. — Abdullah Ansari, May 14 '22 at 10:13
Thanks a lot, is there an example for this way in github or other sites? — Ranaa, May 14 '22 at 16:55
Please add the code you are using in your question, I'll add the answer then, otherwise you have to work with the algorithm provided above. — Abdullah Ansari, May 14 '22 at 18:01
You'll want to use `fallback: 'blocking'` on the dynamic page's `getStaticPaths`, to generate new pages that weren't generated at build time. See [How to add new pages without rebuilding an app with +150k static pages?](https://stackoverflow.com/questions/66036558/how-to-add-new-pages-without-rebuilding-an-app-with-150k-static-pages). — juliomalves, May 14 '22 at 21:26

How to have a dynamic path with dynamic content in nextjs?

0 Answers0