Page Basics in Next.js

If you are new to Next.js make sure you read the previous section App Structure in Next.js

Pages are the building blocks of app. Each page is a different route of your app. In Next.js pages are rendered on the server. You then use components to create your frontend elements.

A really cool thing about rendering your pages on the server is you can pre-populate your page with data from a data source. You can even mix and match pre loaded data, for example in fetching paginated data. First call to the page get the first say 10 records and then you use a call in the front end to get the rest of the data.

A page can be a static page or a dynamic page and you can also parse query params to the page.

Table Of Contents
  1. Page Basics in Next.js
  2. Basic page
  3. Dynamic page
  4. Page with search queries
  5. Page with both url params and query string params

Basic page

mystic.com/mypage

/src/app/mypage/page.tsx
export default function MyPage() {
    return (
        <>
            <div>content</div>
        </>
    )
}

Dynamic page

mysite.com/product/fc15148f-9843-4ad9-a9ed-6e66e4e346c1

/src/app/product/[id]/page.tsx
export default function Product({ params }: { params: { id: string } }) {
    const { id } = params;
    return (
        <>
            <div>Product ID: {id}</div>
        </>
    )
}

Page with search queries

mysite.com/mypage?search_param=john&start=3

/src/app/mypage/page.tsx
export default function MyPage(
    {
        searchParams
    }: {
        searchParams: {
            search_param: string // This is a required query param
            start?: number // This is an optional query param
        }
    }
) {
    const { search_param, start = 0 } = searchParams;
    return (
        <>
            <div>Dashboard 2</div>
            {/* if search_param is provided, output it */}
            {search_param && <div>Search Param: {search_param}</div>}
            {/* if search_param is not provided, show a message in red */}
            {!search_param && <div className=" text-red-600">Search Param is required</div>}
            <div>Start: {start}</div>
        </>
    )
}

Page with both url params and query string params

mysite.com/mypage/fc15148f-9843-4ad9-a9ed-6e66e4e346c1?search_param=john&start=3

/src/app/mypage/page.tsx
export default function Dashboard2(
    {
        params,
        searchParams
    }: {
        params: {
            id: string
        },
        searchParams: {
            search_param: string // This is a required query param
            start?: number // This is an optional query param
        }
    }
) {
    const { search_param, start = 0 } = searchParams;
    const { id } = params;
    return (
        <>
            <div>Product</div>
            <div>Product ID: {id}</div>
            {/* if search_param is provided, output it */}
            {search_param && <div>Search Param: {search_param}</div>}
            {/* if search_param is not provided, show a message in red */}
            {!search_param && <div className=" text-red-600">Search Param is required</div>}
            <div>Start: {start}</div>
        </>
    )
}
Scroll to Top