A simple blog site with a header , footer and main content section area , where data is fetched from the JSONPlaceholder API https://jsonplaceholder.typicode.com/posts.
├── app/
├── error.js
├── globals.css
├── layout.js
├── not-found.js
├── page.js
├── components/
├── Cards/
├── BlogsCard.js
├── LoadingCard.js
├── Layout/
├── Footer.js
├── Header.js
├── Sections/
├── BlogSection.js
├── HeroSection.js
├── Shared/
├── BlogsCard.js
├── LoadingCard.js
├── public/
├── Asets/
├── Img/
├── Svg/
- This is the app Router for nextjs 13 , it contains the main route of the application, with page.js being the index page.
- Contains images and some SVG icons used in the project.
- Contains reusable components such as cards, modals, Layout, various page sections, and shared components.
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.js. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Inter, a custom Google Font.
This project makes use of a list of npm packages. They can be installed during the process of setting up the application using npm install.
-
axios- For making external api calls / request. -
@headlessui/react- This is a tailwindcss support library. -
@heroicons/react- This package contains a list of icon packs used in the project.
The nextjs project also came with already installed packages such as next, react, tailwindcss and react-dom.