Blog Tutorial

This is an introductory Next.js tutorial for App & Web Development at Merit Academy. This tutorial only requires basic HTML and CSS knowledge, no previous JavaScript or React skills needed.

Scope and Learning Targets

Based on Utah CTE’s Web Development 1 Standards (2021-2022).

Standard 2.2

• File structure and naming.

Standard 3.3

• Implement an id selector to modify a single element on the page.
• Implement selectors a:link, a:visited, a:active, a:hover.

Standard 3.4

• Use absolute and static to position elements.

Standard 4.2

• Input Controls: Dropdown Lists.
• Navigational Components.

Standard 4.6

• Specify page description, keywords, viewport, and author using meta tags.
• Declare encoding using meta tags.
• Understand principles of search engine optimization.

Table of contents

• Part 1 - Next.js Project Setup
• Part 2 - Blog Posts and CSS
• Part 3 - Components and DRYness
• Part 4 - Search Engine Optimization
• Part 5 - APIs and Databases