Web Development with NextJS

• Web Development with NextJS
  • Goals
  • Web Development with Next.js
  • Exercise: Deploy at Netlify
  • Exercise: Deploy the app to Vercel
  • References

Goals

This labs intends to introduce to the current version (2023) of NextJS: NextJS 14. For that you have to follow the tutorial:

• Next.js 13 Crash Course Tutorial #1 - Introduction & New Features (opens new window) "Next.js Master Class" YouTube list by The Net Ninja
  • See repo iamshaunjp/nextjs-masterclass (opens new window)
• Differences between Next.js 13 and 14

For each lesson-# from lesson-2 to lesson-12 in the public tutorial:,

• Create a branch learn-# from lesson-# and push your code in it.
• Fill a report in the README.md of each branch learn-# summarizing your experience along the lesson.
• Create a new orphan branch learn-next-ai and use it to follow the tutorial at repo https://github.com/ULL-prompt-engineering/vercel-sdk-ai-quickstart (opens new window) which it is based on the Vercel AI SDK Quickstart Guide (opens new window). It shows you how to use streaming to build a prompt engineering agent.

Web Development with Next.js

See section Web Development with Next.js in this tutorial.

Exercise: Deploy at Netlify

Deploy the app at Netlify. For the details, see section Deploying a Next.js app to Netlify in this tutorial.

Exercise: Deploy the app to Vercel

Deploy the app at Vercel. Follow the instructions at the tutorial Deploying to Vercel in this tutorial.

References

• Netlify (opens new window)
• Next.js (opens new window)
  • The official docs of NextJS are here https://nextjs.org/docs (opens new window)
• React (opens new window)
• Netlify CLI (opens new window)
• Next.js on Netlify (opens new window)
• Deploying a Next.js app to Vercel (opens new window)
  • Environment Variables (opens new window)
• A solution deployed at netlify https://nextjs-oai.netlify.app/ (opens new window)
  • A repo with a solution (opens new window) to the lab "OpenAI and Next.js"
• Repo ULL-MII-SYTWS/nextjs-dynamic-routes (opens new window) (Next.js 12 and React 17)
• NextJS official examples folderx (opens new window)