Get data from slug trong nextjs

Get data from slug trong nextjs

Để lấy dữ liệu từ params trên url ta có thể code như sau 

để tạo 1 slug ví dụ như domain/post/123 

Ta tạo trang page.tsx theo đường dẫn folder như sau 

\src\app\post\[slug]\page.tsx

Code đọc data như sau

'use client';
import { useRouter } from 'next/navigation';

import React, {useEffect, useState} from "react";
import axios from "axios";
import {fetch} from "next/dist/compiled/@edge-runtime/primitives";
type Params ={
    params:{
        slug:string;
    }
}

//const Post = ({ params:{slug}}:Params) => {
const Post = ({ params:{slug}}:Params) => {
    console.log(slug);
    console.log(process.env.URL_BASE);
    const [data, setData] = useState([]);
    const [isLoading, setLoading] = useState(true);
    useEffect(() => {
        setLoading(false);
        let config = {
            method: 'get',
            maxBodyLength: Infinity,
            url: 'https://api.xxxx.com/api/tinh',
            headers: {
                'token': '123456'
            }
        };
        axios.request(config)
            .then((response) => {
                //console.log(JSON.stringify(response.data));
                setData(response.data);
            })
            .catch((error) => {
                console.log(error);
            });
    }, []);
    if (isLoading) return <p>Loading...</p>
    if (!data) return <p>No profile data</p>

    return (
        <>
            <h4>{slug}</h4>
            {data && data.map((item, index) => (
                <h3 key={index}>{item['name']}</h3>
            ))}
        </>
    );
}
export async function getServerSideProps() {
    return {
        props:{
            slug,
        }
    }
}
export default Post;