This project is a News Site built as a learning project to understand and implement various features of JavaScript, ReactJS, NextJS, NextJS App Router, and SQL.
The focus here is on understanding and implementing various features of JavaScript, ReactJS, and NextJS. It uses JavaScript (JS) instead of TypeScript (TS) for simplicity and ease of learning.
While TypeScript offers static typing and other features that can enhance developer productivity and code reliability, it also introduces additional complexity. For a learning project, it's often beneficial to start with JavaScript to grasp the fundamentals before moving on to TypeScript.
- React Suspense: Suspense is a feature in React that allows you to suspend the rendering of a component while loading asynchronous operations, such as data fetching. It lets you "wait" for some code to load and declaratively specify a loading state (like a spinner or fallback UI) while we’re waiting. Suspense for Data Fetching is a new feature that lets you also use
<Suspense>to declaratively “wait” for anything else, including data. - Parallel Routes: Parallel Routes allows you to simultaneously or conditionally render one or more pages within the same layout. They are useful for highly dynamic sections of an app, such as dashboards and feeds on social sites.
- Intercepting RoutesIntercepting routes allows you to load a route from another part of your application within the current layout. This routing paradigm can be useful when you want to display the content of a route without the user switching to a different context.
- Catch all segments: Dynamic Segments can be extended to catch-all subsequent segments by adding an ellipsis inside the brackets
[...folderName]. - Server Components: React Server Components allow you to write UI that can be rendered and optionally cached on the server. In Next.js, the rendering work is further split by route segments to enable streaming and partial rendering, and there are three different server rendering strategies:
To install and run this project, you will need Node.js and npm installed on your machine. Follow the steps below:
- Navigate into the project directory:
cd news-site
- Install the dependencies:
npm install
- Run the project:
npm run dev
The application will start running at http://localhost:3000.
This is a learning project aimed at understanding and implementing the various features of JavaScript, ReactJS, NextJS, NextJS App Router, and SQL. It's a great project for learning how to build a complete full-stack application using these technologies.
As this is a learning project, contributions are welcome. Feel free to fork the project and submit a pull request with your changes!
This project is open source and available under the MIT License.