Read in another language: Українська, English.
This is the NextNews Next.js, React, TypeScript app
Next News is a modern news application built with Next.js. It allows you to stay up to date with the latest news and explore an archive of news from previous years and months. With smooth navigation, fast loading, and a clean interface, reading the news becomes simple and enjoyable.
The app in this repo is hosted on 
But you can use this app manually on your local machine
- Next.js - React framework for building fast, full-stack web applications with server-side rendering and static site generation
- React - Library used for building user interfaces, particularly for single-page applications where you need a fast, interactive experience
- Prisma – A modern ORM that streamlines database access by providing a type-safe, auto-generated query builder and intuitive API for working with relational databases efficiently and reliably
- TypeScript – static typing for safer and more maintainable code
- Tailwind CSS – utility-first CSS framework for fast and responsive UI styling
The full list of dependencies can be found in the package.json file.
- Server Components – Enable rendering parts of the UI on the server with full access to backend resources, improving performance and security
- App Router – File-based routing with support for layouts, nested routes, loading/error states, and route-specific metadata
- Server-Side Rendering (SSR) – Render pages on each request, great for dynamic content and SEO
- Static Site Generation (SSG) – Pre-render pages at build time for fast performance and easy CDN caching
- Client Components – Standard React components rendered in the browser; useful for interactive UI
- Dynamic Routing – Create dynamic pages with URL parameters using file and folder naming conventions
- Metadata and SEO – Add page-level metadata (static or dynamic) for SEO and social media previews
- Streaming and Suspense – Native support for React Suspense, allowing streaming of UI segments
- Parallel Routes – Display multiple routes in the same layout simultaneously
- Catch-All Routes – Handle dynamic segments with multiple path parts
- Interception Routes – Override routing behavior for specific paths
- Route Groups – Organize routes without affecting the URL structure
- Link – Client-side navigation component for seamless and fast route changes without full page reloads
- usePathname – A React hook that returns the current URL pathname, useful for conditionally rendering UI based on the active route
- useRouter – Access router methods and route data in client components, navigate between pages using code (e.g.
router.push, router.back)
- Components - Building blocks of React applications, reusable and encapsulated UI pieces
- Props - Mechanism to pass data and event handlers from parent to child components
- Rendering Lists - Dynamically displaying multiple elements by iterating over arrays
- Conditional Rendering - Displaying different UI elements based on application state, props or conditions
- Suspense - Displays a fallback (like a loader) while lazy-loaded components are being fetched
- Clone the repository:
git clone https://github.com/labattaria/next-news.git- Install project dependencies:
cd next-news
npm installStart the next-dev-server using the following command:
npm run devServer will be located at http://localhost:3000/