A demonstration of a blog implemented with React and Next.js to read blog posts from a sample API and paginate them to 4 per page.
Live Vercel deployment: https://nextjs-blog-eta-livid-53.vercel.app
- Node (tested with v16.10.0)
- NPM (tested with v7.24.1)
- TypeScript (tested with v4.8.4)
npm install
npm run dev
npm run buildnpm run start
Basic unit tests for components have been implemented using Jest and React Testing Library. Test cases are located in the /tests folder.
npm test
This project uses the following stack:
The Next.js framework is used to extend the base functionality of React to provide features such as server-side rendering and page routing.
Typescript configuration is located in tsconfig.json and is set to target es6.
The Tanstack Query (formerly React-Query) library is used to fetch data from an external API endpoint located at https://express-api-for-vercel.vercel.app/posts (code for that sample API can be found in this repository.)
Tanstack is integrated with Next.js using the method detailed in their GitHub CodeSandbox.
This integration uses Server-Side Rendering (SSR) to render the static HTML of the pages and then "hydrates" them with the dynamic data once it is available. This prevents a blank page from appearing while the data is fetched from the API.
The usePosts hook fetches data from the API and pre-sorts it by the createdAt field to ensure the newest posts are always displayed first, by creation date.
The Chakra-UI library is used for visual styling. This UI library provides extensive options for positioning, coloring and sizing the content across responsive layouts. The styling options available from Chakra-UI make a lower-level CSS module such as styled-components unneccessary.
- Restore state of previously loaded posts when clicking back from an individual post page to the post index.