Next.js v14 TypeScript

Project Structure

next-app-2024/
├── public/
├── src/
│   ├── app/
│   │   ├── layout.tsx
│   │   ├── _app.tsx
│   │   └── page.tsx
│   ├── store/
│   │   ├── slices/
│   │   │   └── postsSlice.ts
│   │   └── store.ts
│   └── styles/
│       └── globals.css
├── next.config.mjs
├── package.json
├── postcss.config.js
├── tailwind.config.js
└── tsconfig.json

Overview

This project will guide you through setting up a Next.js application with TypeScript. It will cover HTML5, CSS3, SSR (Server-Side Rendering), ISR (Incremental Static Regeneration), and the Redux Toolkit using the jsonplaceholder.typicode.com/posts API for practical examples.

Prerequisites

• Node.js v20.10

Scope

• Setup and Installation
• Project Structure and Configuration
• Core of HTML5 and CSS3
• Setting up SSR with Next.js
• Setting up ISR with Next.js
• Integrating Redux Toolkit
• Fetching Data from API and State Management