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;
                     
                                    
                 
                 
                 
                