Create a Dashboard

Create the Dashboard page

Let's create the Dashboard homepage. To do that, create a file called pages/dashboard/index.js and add the following content:

import Link from 'next/link'
import Theme from '../../components/Theme'
import ms from 'ms'
import { getPostList } from '../../lib/data'
import { getSession } from 'next-auth/client'

export default function Home ({ postList }) {
  return (
      <div className="dashboard">
        <div className="heading">
            <Link href='/dashboard/post/create'>
                <a className="create-new">
                    + Create New
        <div className='dashboard-posts'>
          { => (
            <div key={post.slug} className='dashboard-post'>
              <div className='time'>{ms( - post.createdAt, { long: true })} ago</div>
              <div className="cta">
                <Link href='/dashboard/post/[slug]' as={`dashboard/post/${post.slug}`}>
                  <a className="edit">
                <a className="delete" href="#" onClick={e => handleDelete(e, post)}>

export async function getServerSideProps ({ req, res }) {
  const session = await getSession({ req })  
  const postList = await getPostList({ownerId:})

  return {
    props: {

Then if you visit http://localhost:3009/dashboard or click the "Dashboard" link in the header, you can view the dashboard. You could also see the blog post you added in the previous step.

Now, here's a simple task for you:

  • Replace the getServerSideProps function into getStaticProps
  • Run the app & make sure you are logged in to the app
  • Visit the dashboard
Q: How do you describe the outcome?

šŸ™ We need your help

We need your help to keep maintain & add new content to this course. Here's how you can support us: