Desarrollo y Mantenimiento de Sistemas Informáticos

4º. 1er cuatrimestre. Itinerario de Sistemas de la Información. Grado en Ingeniería Informática. ULL

---

GH Org   - GH Template Org   - GitHub Classroom   - Discussions   - Teams   - Campus ULL   - Students Activity   - Chat   - Google Meet

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

Web Development with NextJS

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 List
• Enrolled link (private)
• See repo iamshaunjp/nextjs-masterclass
• Full Course “Next.js version 13 MasterClass”
• ULL-ESIT-DMSI/nextjs13-template is the fork of iamshaunjp/nextjs-masterclass we have used for this assignment
• Differences between Next.js 13 y 14

For each lesson-# in the 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 which it is based on the Vercel AI SDK Quickstart Guide.

Web Development with Next.js

The section Web Development with Next.js in this tutorial introduces some basic concepts about Next.js and React.

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.

Rubrica

• Code of the lab is correct and works
• It has followed the Next.js current version of the tutorial
• Site deployed at netlify and Vercel
• Report is correct and complete
• The .zip has been delivered on the campus

References

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