Building a News Blog Web App with Next.js and Express

Install Node.js and npm on Windows with NVM for Windows. Download the nvm setup from releases, install with administrator privileges, set the LTS version (16.17.0), then verify Node.js and npm.

Install nodejs and npm on Ubuntu Linux using nvm to manage multiple node versions. Verify setup by checking node -v and npm -v after installing the latest long-term support version.

Set up the Next.js frontend by creating a client directory, initializing package.json, installing Next.js, React, and React-DOM, and building a pages/index.js that runs on localhost:3000 with automatic reload.

Lay out the HTML structure for an article list in a Next.js app using React Bootstrap cards to show titles with placeholders, and plan data flow toward a backend.

Learn how to move hard-coded article data (an array of objects) into a variable, map over articles to create dynamic cards, and pass data via get static props in Next.js.

Learn to render a specific article page in Next.js by isolating article data, injecting it via props, and using getStaticProps and getStaticPaths to define dynamic paths and build-time rendering.

Map article slugs to dynamic routes in Next.js by using get static props and get static paths, access context params, and fetch the matching article with slug, including 404 handling.

Use Next.js Link and React Bootstrap breadcrumb to enable client-side page transitions, linking article titles to individual article pages via slug, with a breadcrumb trail.

Create a reusable header with a React Bootstrap navbar in a Next.js app, shared across pages via _app.js, and fix client-side redirects with getStaticProps.

Develop the backend for a Next.js news blog by building an Express API in a separate server folder, with routes for /articles and /articles/:articleSlug, handling req.params.

Implement Express endpoints to get /articles and /articles/:slug, returning JSON, while moving article data from client to server and handling 404 not found as JSON.

Use Next.js get server side props to fetch articles from the json api on every request, calling http://localhost:3001/articles, replacing get static props to render up-to-date data.

Update the frontend to fetch a specific article with get server side props, calling the api /article/[slug] using context.params.article slug and render a 404 not found page when missing.

Create a custom 404 page in Next.js by adding pages/404.js and exporting a NotFound component, using getServerSideProps to trigger not found, with a React Bootstrap danger alert.

Display a loading indicator during Next.js route transitions by wiring router events to a loading state and rendering a spinner while data loads.

Center the fullscreen loading spinner with a fixed container and flexbox, using a semi-transparent overlay and z-index to block content during client-side transitions. Style with CSS or Sass in Next.js.

Subscribe to router events in a Next.js app using useEffect. Clean up by unsubscribing on unmount to manage route transitions and loading state.

Install Postgres on Windows and set up pgadmin 4 and psql, configure the default port 5432, and connect to the Postgres database on localhost using pgadmin or psql.

Add the PostgreSQL bin directory to the windows path to access psql from any command prompt, and run commands such as create db and create user.

Install and configure postgres on ubuntu 22.04, set up postgresql, test with psql, and install pgadmin4 for graphical database management.

Create a PostgreSQL role for your application using PgAdmin 4 or the command line, showing how to set login privileges, passwords, and view the generated sql.

Create a Postgres articles table with id, slug, title, and body, using a big integer primary key with auto increment and not null constraints on slug and title.

Explore how Sequelize ORM abstracts database queries in a Node.js backend by mapping models to tables and translating ORM calls into SQL, including findAll, findOne, create, and update.

Install and configure Sequelize, Postgres driver, and the Sequelize CLI to scaffold models, migrations, and seeders. Initialize a config, model index, and environment-specific settings to connect the database for development.

Configure the development database in config.json with username, password, database, host, and dialect, avoiding password exposure. Test migrations with sequelize cli and confirm the Sequelize Meta table in PgAdmin.

Explore generating and running a sqlite sequelize migration to recreate the articles table, using the CLI to create the article model and its migration with slug, title, and body.

Tweak the generated migration to lowercase table names, use underscore-separated column names, switch id to big int, enforce not null, set varchar lengths, and run up and down migrations.

Rename the sequelize meta table to lowercase with underscores. Configure migration storage table name in server/config/config.js and run migrations to recreate the articles table with the new name.

Learn to reimplement the articles endpoint using db.article.findAll with Sqlize, turning a memory-based API into a persistent database-backed service, using async handlers and models.

Implement a custom 404 not found handler in an Express API using middleware, app.use, and res.status(404) to return a JSON error for unknown routes.

Build a custom Express error handling middleware that reports errors to a monitoring service, returns a safe 500 response, and prevents server crashes by using next(err) in async routes.

Post a new article by sending a json payload to /articles with fetch, stringifying slug, title, and body from state, then navigate to the created article in Next.js.

Debugging CORS issues in a Next.js and Express app by analyzing preflight requests, setting the Access-Control-Allow-Origin header, and adopting the cors middleware for reliable cross-origin communication.

In this Next.js and Express course, filter req.body to permitted fields (slug, title, body) and use the article model to build and save a validated article.

Explore backend validation to distinguish database level errors from application logic validation, enforce slug length, and send a generic unprocessable entity error while prepping frontend validation.

Learn to validate article fields, enforce slug uniqueness with a database level constraint, and add a pre-insert check in the Express server using Sequelize.

Add an edit button on the article page that links to a pre-filled edit form. Reuse the article form component for both new and edit pages, with the route /articles/[slug]/edit.

Add icons to your application using bootstrap icons and the react bootstrap icons package; import the pencil square icon and attach it to the edit button.

Refactor the new article page by extracting the form into a separate component and a generic on field change handler with an article state object; note bootstrap 5 margin changes.

Refactors the article form into a reusable ArticleForm component, enabling reuse across the new article and edit article pages, with props-driven onSubmit and state lifting.

Refactors the article creation form to handle fetch responses, navigate to the created article by slug on success, and report submission errors via try-catch.

Implement the edit article page by wiring the article form, handling onsubmit and onsuccess, using the router to obtain the article slug, and updating the submit button label to update.

Populate the edit form with existing article data via a prop, then submit updates with a RESTful PUT to /articles/{slug}, and navigate back on success.

define the update article endpoint at put /articles/:articleSlug, validate existence, return 404 if not found, filter permitted fields, update, and return the updated article.

Fetch article data on the server with getServerSideProps to populate the edit form in a Next.js and Express news blog, and handle not found or error states.

Fix a navigation bug after submitting an edit form by correcting the article slug property from slug to article slug in the frontend, and ensure the update response is handled.

Refactor the back end by extracting article route handlers into a dedicated articles file, and centralize permitted fields logic in utilities for a scalable, testable Next.js and Express API.

Move endpoint definitions to a separate routes file under the server directory. Export a function that takes the app, requires the handler, uses try/catch, and registers all routes from index.js.

Learn to reset the article form to its original values, including edits to the slug, by adding a reset button, handling on reset click, and using initial article values.

Implement a global toast notification in a Next.js app to confirm successful article updates; inject a shared show function via pages/_app.js and render a reusable toast across all pages.

Trigger a toast notification after updating an article by wiring a show app notification through pages and _app.js, with a five-second auto dismiss.

Disable HTML5 built in validation and implement it programmatically with Bootstrap visuals, using a React stateful validated flag and on submit with event.currentTarget.checkValidity to show invalid and valid feedback.

Discover how to paginate large article lists by returning page metadata (items per page, current page, total pages) in the API and testing with Postman.

install postman on windows 10, download from postman.com, run the executable, skip account, then test APIs by sending get and post requests to localhost:3001 with json payloads and headers.

Implement backend pagination for the articles endpoint, controlling page size and offset, and expose a meta payload with page size and items, tested via Postman.

Compute total pages from article count and page size with the ceiling function, then validate the page query with type checks and unprocessable entity errors to ensure robust pagination.

Build a frontend pagination interface for the news blog by rendering pagination items from total pages, linking pages with query parameters, and using the Next.js router to indicate active page.

Read the page query from the browser and fetch the corresponding articles via get server side props, handling undefined pages by omitting the parameter.

Learn to store and serve static assets like images in a Next.js app using the public directory, and add a placeholder thumbnail with accessible alt text.

Discover how the Next.js image component optimizes images and enables lazy loading to improve responsiveness and performance for a news blog web app.

Add a thumbnail URL field to the articles table and wire a front-end input in the article edit form to capture image locations, starting with a local public directory.

Migrate to add thumbnail_url to articles using sequelize-cli. Update the backend to permit the new field and run a safe up/down migration without dropping tables.

Serve static assets from the express server under a /assets path using express.static. Enable external image domains in next.config.js for Next.js image optimization when loading external resources.

Use onBlur instead of onChange for the thumbnail URL field to prevent crashes from invalid URLs; update the field only on blur with a defaultValue, reducing unnecessary requests.

Replace a blog thumbnail by uploading a new image and deleting the previous file from public/images to prevent storage growth, handled in the articles.js update image routine.

Learn to prevent default form submission and submit via Ajax using fetch and multipart form data, updating the article thumbnail on the same page without reload.

Learn how to clear a file input after submitting a thumbnail in a React form, using a ref to reset the input and keep the UI in sync.

Demonstrate displaying a successful thumbnail submission message after users submit a thumbnail, next to the save button, using state to store and render conditionally.

Learn to offload image storage to Amazon S3 by creating a public bucket, enabling ACLs, and preparing a dedicated image service for a news blog web app.

Instantiate an AWS S3 client in Node.js using the AWS SDK v3, configure credentials and region, and optionally load them from environment variables or a credentials file.

Send the image to S3, remove the local uploads file, and update the thumbnail URL to point to the bucket; implement a delete object command and adjust Next.js image domains.

Refactor code into an image service to manage S3 uploads and deletions, creating a dedicated image service class with send and remove methods that handle bucket, key, and thumbnail URL.

Demonstrate front-end mime-type validation with an image/* accept filter on the file input to show only image files. Run file removal in parallel with promises to keep the UI responsive.

Perform cleanup by addressing mime type and extension checks, consider the file-type package, then reset data and assets: delete articles, purge S3 images, and restore the article form.

Handle the no articles scenario by returning an empty array and zero total pages, then show a 'there are no articles' message on the frontend.

Add an excerpt field to articles and display a snippet under the title. Implement front-end changes with a new form control, and style the excerpt as a muted subtitle.

Add an excerpt field to the article model, implement a migration and backend handlers, and populate existing articles before enforcing a not null constraint.

Fix the squeezed thumbnail by enforcing a minimum width of 128 pixels on the image container, using a dedicated CSS class and importing it in the Next.js and Express project.

Add meta tags in Next.js to support seo, including utf-8 charset, viewport, and description from the article excerpt. Configure robots with index and follow; use a key to avoid duplicates.

Add Twitter card meta tags to your Next.js and Express news blog, including twitter:card, twitter:title, twitter:description, and twitter:image, to generate rich previews on Twitter.

Learn to implement open graph meta tags (og:type, og:title, og:description, og:image, og:url) in a Next.js and Express article, to optimize Facebook shares with accurate previews.

Develop a markdown toolbar for the article body in a Next.js and Express news blog app, enabling headings, bold, and italics through a React-based text area.

Add a bold button to the markdown toolbar in the news blog app, wrapping the selected text in the text area with two asterisks before and after to render bold.