Server Side Rendering with Next.js: Update a News Website

Server Side Rendering with Next.js: Update a News Website

Instructor: Harrison Kong

What you'll learn

Use Next.js life cycle hooks for content rendering
Render website content during build time
Render website content dynamically on the server

Details to know

Shareable certificate

Add to your LinkedIn profile

Taught in English

See how employees at top companies are mastering in-demand skills

Learn more about Coursera for Business

Learn, practice, and apply job-ready skills in less than 2 hours

Receive training from industry experts
Gain hands-on experience solving real-world job tasks
Build confidence using the latest tools and technologies

About this Guided Project

Do you know that according to surveys, Next.Js is among the top five most popular web development platforms for companies of all sizes?

In this 1.5 hour project-based course, you will learn how to implement dynamic content generation and server side rendering with Next.js. We will do this by updating a news website. We will first build the functionalities to generate content automatically with static site generation and then implement server side rendering to completely automate the process of publishing new content. Built on React and Node.js, Next.js offers improved loading performance, built-in development server, and support for React components, allowing projects of all sizes to be developed and deployed quickly. This course is aimed at learners who already have the following skills: HTML, JavaScript: async functions, arrays, import, JavaScript expressions, React/Next.js: components, embedding JavaScript expressions.

Learn step-by-step

In a video that plays in a split-screen with your work area, your instructor will walk you through these steps:

Task 1: Introduction and Getting Started
Task 2: Extract Metadata from News Draft File
Task 3: Automatically Generate News Content
Optional: Practice Task
Task 4: Create News Article Pages Automatically
Task 5: Render the Homepage Dynamically
Optional: Cumulative Challenge

Recommended experience

HTML, JavaScript: async functions, arrays, import, JavaScript expressions. React/Next.js: components, embedding JavaScript expressions

8 project images

Instructor

Harrison Kong

Coursera Project Network

48 Courses171,943 learners

Offered by

Coursera Project Network

How you'll learn

Skill-based, hands-on learning
Practice new skills by completing job-related tasks.
Expert guidance
Follow along with pre-recorded videos from experts using a unique side-by-side interface.
No downloads or installation required
Access the tools and resources you need in a pre-configured cloud workspace.
Available only on desktop
This Guided Project is designed for laptops or desktop computers with a reliable Internet connection, not mobile devices.