Dev News

A modern news platform for developers, built with Next.js 14, TypeScript, and Tailwind CSS. This project demonstrates advanced Next.js features including Parallel Routes, Intercepting Routes, Internationalization (i18n), and API Routes.

Features

• Next.js App Router: Utilizes the latest routing paradigm for efficient and scalable routing.
• TypeScript: Fully typed codebase for better developer experience and code quality.
• Tailwind CSS: Styled with utility-first CSS for a modern and responsive design.
• Internationalization (i18n):
  • Supports English (en) and Bengali (bn).
  • Automatic language detection based on browser preferences via Middleware.
  • Localized UI components (Navbar, Footer, Labels).
• Parallel & Intercepting Routes:
  • Clicking a news card opens details in a modal (intercepting route) without losing context.
  • Refreshing the modal page renders the full details page (parallel route fallback).
• API Routes:
  • GET /api/news: Fetch all news items.
  • GET /api/news/{slug}: Fetch a specific news item.
  • PATCH /api/news/{slug}: Update news title and description.
  • DELETE /api/news/{slug}: Delete a news item.
• Dynamic Data: News data is dynamically imported from a JSON file, simulating a database.
• Custom 404 Pages:
  • Global Not Found page for invalid routes.
  • Specific "News Not Found" page when accessing a non-existent news slug.

Getting Started

Prerequisites

• Node.js 18.17 or later.

Installation

1. Clone the repository:

   git clone https://github.com/rafi983/dev_news
   cd dev_news

2. Install dependencies:

   npm install

3. Run the development server:

   npm run dev

4. Open http://localhost:3000 with your browser to see the result.

Project Structure

dev-news/
├── app/
│   ├── [lang]/                 # Localized routes
│   │   ├── @modal/             # Parallel route slot for modal
│   │   │   ├── (.)news/[slug]/ # Intercepting route for news details
│   │   │   └── default.tsx     # Default fallback for modal slot
│   │   ├── news/
│   │   │   └── [slug]/         # Full page news details route
│   │   ├── layout.tsx          # Root layout for localized pages
│   │   ├── page.tsx            # Home page (News Feed)
│   │   └── not-found.tsx       # Localized Not Found page
│   ├── api/                    # API Routes
│   │   └── news/
│   │       ├── [slug]/         # Single news operations (GET, PATCH, DELETE)
│   │       └── route.ts        # All news operations (GET)
│   ├── components/             # Reusable UI components (Header, Modal, etc.)
│   ├── get-dictionary.ts       # Dictionary loader for i18n
│   ├── globals.css             # Global styles
│   ├── layout.tsx              # Root layout
│   └── not-found.tsx           # Global Not Found page
├── dictionaries/               # Localization JSON files
│   ├── en.json
│   └── bn.json
├── public/
│   ├── data.json               # Mock database
│   └── images/                 # News images
├── utils/                      # Utility functions
├── middleware.ts               # Middleware for i18n routing
└── ...

API Documentation

Get All News

• URL: /api/news
• Method: GET
• Response: Array of news objects.

Get Single News

• URL: /api/news/:slug
• Method: GET
• Response: Single news object.
• Error: 404 if not found.

Update News

• URL: /api/news/:slug
• Method: PATCH
• Body: JSON object with title and/or description.

  {
    "title": "New Title",
    "description": "New Description"
  }

• Response: Updated news object.
• Error: 400 if invalid fields are provided, 404 if not found.

Delete News

• URL: /api/news/:slug
• Method: DELETE
• Response: Success message.
• Error: 404 if not found.

Technologies Used

• Next.js
• React
• Tailwind CSS
• TypeScript
• Negotiator (for language negotiation)
• @formatjs/intl-localematcher (for locale matching)

License

This project is licensed under the MIT License.