NextNews

A Next.js 14 (App Router) demo application for practicing routing and rendering patterns: route groups, layouts, loading/error states, dynamic segments, optional catch-all segments, and parallel + intercepting routes — backed by SQLite (better-sqlite3).

Features

• Marketing + content route groups ((marketing), (content))
• News listing at /news
• Dynamic news detail at /news/[slug] (+ not-found handling)
• Archive filtering with optional catch-all routes at /archive/[[...filter]]
• Parallel + intercepting routes for an image modal (/news/[slug]/image)
• Route-level loading / error UI

Tech Stack

• Framework: Next.js 14.1 (React 18, App Router)
• Data: SQLite via better-sqlite3
• Language: JavaScript

Requirements

• Node.js: 18+ (recommended 20+)
• npm: comes with Node.js

Getting Started

Clone the repository

git clone https://github.com/vasylpryimakdev/next-news.git
cd next-news

Install dependencies:

npm install

Run the development server:

npm run dev

Open http://localhost:3000.

Data / Database

The Next.js app reads from a local SQLite file:

• data.db (project root)
• table: news with columns id, slug, title, content, date, image

If data.db is missing or does not contain the news table, pages that query the DB (e.g. /news, /archive) will fail.

Optional: Backend (Express API)

This repository also includes an optional Express server in backend/:

• Endpoint: GET /news
• Port: 8080
• Database: backend/data.db (auto-seeded with dummy news on first run)

Note: The Next.js app currently reads from the root data.db directly (server-side), not from the Express API. The backend is primarily for learning/experimentation.

Run it:

cd backend
npm install
npm start

Scripts

• dev: next dev
• build: next build
• start: next start
• lint: next lint

Routing Map (App Router)

Route-to-file mapping in the app/ directory:

• / → app/(marketing)/page.js
• /news → app/(content)/news/page.js
• /news/[slug] → app/(content)/news/[slug]/page.js
• /news/[slug]/image → app/(content)/news/[slug]/image/page.js
• /archive/[[...filter]] → app/(content)/archive/@archive/[[...filter]]/page.js

Related UI conventions:

• loading UI: app/**/loading.js
• error UI: app/**/error.js
• not found UI: app/**/not-found.js
• layouts: app/**/layout.js

Example dynamic URL:

• /news/will-ai-replace-humans

Project Structure

app/
  (marketing)/
    layout.js
    page.js
  (content)/
    layout.js
    not-found.js
    news/
      loading.js
      page.js
      [slug]/
        layout.js
        loading.js
        not-found.js
        page.js
        @modal/
          default.js
          (.)image/
            page.js
        image/
          page.js
    archive/
      layout.js
      loading.js
      @latest/
        default.js
      @archive/
        [[...filter]]/
          error.js
          page.js
  api/
    route.js
components/
  main-header.js
  nav-link.js
  news-list.js
  modal-backdrop.js
lib/
  news.js
backend/                # optional Express API
  app.js
  package.json
  data.db
data.db                 # SQLite DB used by Next.js app
package.json
package-lock.json
next.config.mjs

Screenshots

Preview

Home	News	Archive

News article	News Article Image

Notes

• This codebase uses the App Router (app/), not the Pages Router (pages/).
• Data access helpers live in lib/news.js (SQLite queries with artificial delays to demonstrate loading UI).
• data.db / backend/data.db are typically local dev artifacts and should not be committed.

Troubleshooting

• better-sqlite3 install fails on Windows: use Node 18+ (20+ recommended) and reinstall dependencies.