Frontend Development with Next.js
Intermediate
0.0
0 reviews
1 Learners
Explore the full path from web fundamentals to modern application development using React and Next.js. Learn how to structure apps, manage data, handl…
182
Chapters
20
Learning hours
192
Assignments
AI Assistant
Shareable Certificate
Resultater
Resultater
Track content
Related courses and projects
Udtalelser
Funktioner
Priser
Resultater
Resultater
Track content
Related courses and projects
Udtalelser
Funktioner
Priser
Hvad du vil lære
Build web pages using HTML and CSS.
Use TypeScript for safer and scalable code.
Work with routing, layouts, and data fetching.
Create interactive logic with JavaScript.
Style modern interfaces with Tailwind CSS.
Handle forms and backend logic with route handlers.
Develop component-based apps with React.
Build full applications with Next.js.
Learning track content
Hvorfor HTML er Vigtigt i Webudvikling
Grundlæggende HTML-dokumentstruktur
Forståelse af Tags, Elementer og Attributter
Udfordring: Strukturér et HTML-dokument
Brug af Overskrifter og Afsnit
Udfordring: Strukturér Tekstindhold
Arbejde med Links
Brug af Knapper
Oprettelse og Brug af Lister i HTML
Udfordring: Strukturér Indhold med Lister
Arbejde med billeder i HTML
Udfordring: Indsæt Billeder
Oprettelse og Strukturering af HTML-Tabeller
Udfordring: Arbejde med Tabeller
Opbygning af HTML-formularer
Udfordring: Opbyg en Webformular
Brug af formularinput
Mærkning af formularfelter
Udfordring: Anvend Formularinput og Etiketter
HTML Input-Attributter for Udvidet Funktionalitet
Semantisk HTML og Sidestruktur
Udfordring: Implementer Semantiske Elementer
Opbygning af et Komplet Website med HTML
Hvad CSS Er, og Hvorfor Det Er Vigtigt
Forbindelse af CSS til HTML
Grundlæggende CSS-selektorer
Styling af Tekst og Farver
Tilføjelse af Hover-Effekter
Udfordring: Style Din Første Webside
Tekstformatering for Bedre Læsbarhed
Arbejde med Skrifttyper og Skrifttypeegenskaber
Tilføjelse af brugerdefinerede skrifttyper
Udfordring: Forbedr et Blogartikeldesign
Forståelse af Box-Modellen på en Praktisk Måde
Display-egenskab: Block, Inline og Inline-block
Udfordring: Ret et Ødelagt Layout
Hvorfor Flexbox Eksisterer
Kontrol af Retning
Justificering af Indhold Horisontalt
Justering af elementer lodret
Arbejde med Flex-Elementer
Brug af baggrundsfarver
Anvendelse af Baggrundsbilleder
Tilføjelse af Skygger for Dybde
Udfordring: Opret en Moderne Kortkomponent
Hvad er JavaScript?
Kørsel af JavaScript i Browseren
Variabler og Konstanter
Datatyper og Grundlæggende Operationer
Arbejde med Strenge og Tal
Operatorer og Sammenligninger
Betinget Logik `if` / `else`
Logiske Operatorer
Funktioner
Parametre og Returværdier
Arrays
Arbejde med Arrays med `push`, `pop`
Array-metoderne `map`, `filter`
`For`-løkke
Objekter
Kombinering af Data og Logik
Grundlæggende Fejlfinding
Forståelse af Objekter i JavaScript
Oprettelse af Objekter i JavaScript
Arbejde med Indlejrede Objekt-Egenskaber
Adgang til Objekt-Egenskaber i JavaScript
Håndtering af Objekt-Egenskaber
Definering af Objektmetoder
Brug af Egenskaber Inden for Metoder
Kloning og Sammensmeltning af Objekter med Spread-Operatoren
Destrukturering af Objekter for Mere Overskuelig Kode
Transformering af Arrays med Map()-Metoden
Filtrering af Arrays med Filter()-Metoden
Finde Elementer i et Array med Find()-Metoden
Sortering af Arrays med sort()-Metoden
Introduktion til Asynkron JavaScript
Forståelse af Callbacks i JavaScript
Håndtering af Asynkrone Operationer med Promises
Brug af Async/Await for Mere Overskuelig Asynkron Kode
Hentning og Arbejde med API'er i JavaScript
Integration af API'er i JavaScript-applikationer
Ready for React
Hvad React Er, og Hvorfor Det Bruges
Forståelse af React-Komponenter
JSX-Grundlæggende i React
Rendering af Elementer i React
Udfordring: Gengiv et Element i React
Videregivelse af Data med Props
Udfordring: Opret Funktionelle Komponenter
Betinget Rendering i React
Udfordring: Implementering af Betinget Rendering i Chatnotifikation
Udfordring: Implementér Betinget Rendering i Bankadvarsel
Gengivelse af Lister med Data i React
Udfordring: Vis Datasamlinger
Håndtering af Tilstand med useState
Handling User Events in React
Udfordring: Skift Synlighed med State
Working with Forms in React
Stylingmuligheder i React
Brug af Inline-Stilarter i React
Styling af Komponenter med Ekstern CSS
Udfordring: Style en React-applikation
React Fundamentals Wrap Up
What Is TypeScript?
Why Use TypeScript?
TypeScript in Real-World Projects
Number Type
String Type
Boolean Type
Type Inference and Explicit Typing
Array Types
Tuple Types
Object Types Basics
Defining Object Shapes with Interfaces
Optional and Readonly Properties
Extending and Combining Interfaces
Interfaces vs Type Aliases
Annotating Function Parameters
Typing Function Return Values
Optional Parameters
Default Parameters
Union Types
Literal Types
What Are Type Guards?
Using typeof and Array.isArray
What Are Generics?
Generic Functions in Practice
Typing Component Props
Typing State with useState
Typing Events (Forms and Inputs)
Typing Lists and Keys
Promises and Async Functions
Practical Patterns for Async Typing
Common Pitfalls When Switching
What Next.js Is and Why It Is Used
React vs Next.js
Creating a Next.js Project
Understanding the Project Structure
Running the Development Server
Your First Page in Next.js
File Based Routing in Next.js
Linking Between Pages
Dynamic Routes
Route Groups and Organization Basics
Building a Not Found Page
What Layouts Are in Next.js
Creating a Root Layout
Nested Layouts for Shared UI
Reusing Navigation and Common Page Structure
Adding Metadata to Pages
Server Components and Client Components
When to Use "use client"
Building Interactive Components in Next.js
Passing Data from Server to Client Components
Rendering Data in Server Components
Common Mistakes with Server and Client Components
Fetching and Rendering Data in Next.js
Using Dynamic Routes to Load Data
Handling Loading and Error States
Working with Forms in Next.js
Introduction to Route Handlers
Sending and Receiving Data with Route Handlers
Styling a Next.js App with Tailwind
Static and Dynamic Rendering Basics
SEO and Metadata Basics in Next.js
Preparing a Next.js App for Production
Deploying a Next.js App
Final Project Build a Small Web App with Next.js
Boost dine Tech Færdigheder!
med op til 55% rabat
Features:
*Tracks not included in Pro plan
500+ Topbedømte kurserBanebrydende AI Copilot
Personlige studieveje40+ praktiske virkelige projekter
Uden afbestilling, før den valgte rabatplan udløber, accepterer jeg, at Codefinity automatisk opkræver $104 hver 3. måned indtil jeg annullerer. Læs mere om afbestillings- og refunderingspolitikken på Abonnementsvilkår.
Recommended Courses and Projects
kursus
Ultimativ HTML
Lær det grundlæggende i HTML (HyperText Markup Language), fundamentet for webudvikling. Dette begynder-venlige kursus dækker tags, attributter, elementer og strukturering af websider. Få praktiske færdigheder i at skabe overskrifter, afsnit, lister, billeder, links, formularer og tabeller. Udforsk bedste praksis, optimering og webtilgængelighed. Start din webudviklingsrejse med HTML.
4 timer
42 kapitlerBegynder
25 STUDERER NU
kursus
Introduktion til JavaScript
Dyk ned i verdenen af det mest populære sprog til front-end udvikling – JavaScript. JavaScript er et sprog, der er indbygget i næsten alle browsere og kan bruges til en bred vifte af opgaver. Lær den grundlæggende funktionalitet og forbered dig på udfordringer og mere avancerede programmeringsteknikker.
7 timer 74 kapitlerBegynder
23 STUDERER NU
kursus
Introduktion til React
Udforsk grundlæggende principper for opbygning af brugergrænseflader med React. Fokus på komponenter, JSX, dataflow, tilstand og sideeffekter anvendt i daglige React-applikationer.
3 timer 25 kapitlerMellemniveau
6 STUDERER NU
kursus
CSS-Grundlæggende
Behersk det grundlæggende i CSS, sproget til styling, der forvandler udseendet og oplevelsen af websider. Udforsk kernekoncepter såsom tekststilarter, farver, afstand, box-modellen, Flexbox og dekorative effekter. Opbyg færdigheder til at skabe visuelt engagerende og velstrukturerede websider.
3 timer 28 kapitlerBegynder
23 STUDERER NU
kursus
HTML-Grundlæggende
Behersk det grundlæggende i HTML for at opbygge velstruktureret og tilgængeligt webindhold. Lær at strukturere dokumenter ved hjælp af tags, elementer og attributter. Arbejd sikkert med tekst, lister, billeder, lyd og video for at berige websider. Opret tabeller for organiserede data og formularer til brugerinput og interaktion. Opdag semantisk HTML for at forbedre tilgængelighed og opbygge komplette, funktionelle webstedsstrukturer fra bunden.
3 timer 35 kapitlerBegynder
20 STUDERER NU
kursus
Javascript Datastrukturer
Lær at arbejde sikkert med data i JavaScript ved at mestre objekter og arrays. Forstå hvordan man opretter, tilgår og håndterer objekt-egenskaber og metoder effektivt. Dyk ned i avancerede teknikker til objektmanipulation, herunder iteration, kloning og destrukturering for mere overskuelig kode. Opbyg et solidt fundament i arbejdet med arrays og lær at håndtere, iterere og ændre array-elementer effektivt. Behersk avancerede array-metoder som map, filter, find og sort for at transformere og håndtere data effektivt i dine applikationer.
6 timer 44 kapitlerMellemniveau
9 STUDERER NU
kursus
Introduktion til TypeScript
Dette kursus er designet til absolutte begyndere, der ønsker at mestre det grundlæggende i programmeringssproget TypeScript. TypeScript er et moderne og kraftfuldt sprog, der udvider JavaScripts funktionalitet og gør din kode mere pålidelig og læsbar. Vi starter helt fra bunden og gennemgår variabler, datatyper, sammenligningsoperatorer og betingede udsagn. Derefter dykker vi ned i arbejdet med arrays og løkker. Når du har gennemført dette kursus, vil du være klar til at skabe simple programmer i TypeScript og fortsætte din læringsrejse mod mere avancerede emner.
3 timer 34 kapitlerBegynder
3 STUDERER NU
kursus
CSS-layout, effekter og Sass
Forbedr dine stylingfærdigheder ved at mestre avancerede CSS-teknikker til moderne webdesign. Positionér og administrér elementer med præcision ved hjælp af avancerede positioneringsstrategier. Skab glidende overgange og engagerende animationer for at forbedre brugeroplevelsen. Transformér og manipuler elementer for dynamiske visuelle effekter. Byg responsive designs, der tilpasser sig på tværs af enheder, og lær at effektivisere din arbejdsgang med CSS preprocessorer som Sass.
6 timer 48 kapitlerMellemniveau
3 STUDERER NU
kursus
Next.js 14 Ekspertise til Udvikling af Moderne Webapplikationer
Lær at opbygge moderne, højtydende webapplikationer med Next.js. Opsæt projekter med strukturerede layouts, styling og routing for problemfri navigation. Hent og vis data effektivt, mens du optimerer rendering og ydeevne. Implementer avancerede funktioner som paginering, CRUD-operationer og global søgning for dynamiske webapps. Udrul dine Next.js-projekter, tilslut dem til databaser, og tilføj autentificering for at beskytte brugerdata.
8 timer 48 kapitlerAvanceret
4 STUDERER NU
kursus
JavaScript Ninja
Velkommen til JavaScript Ninja-kurset! Dette engagerende og interaktive kursus er designet til at introducere dig til grundlæggende JavaScript-programmering gennem et sjovt og lærerigt spil. Du vil guide en ninja gennem forskellige udfordringer ved at bruge JavaScript til at kontrollere bevægelser og interagere med objekter som sushi. Startende med det grundlæggende, vil du lære at navigere på kortet, samle og placere sushi og gradvist udvikle dig til mere komplekse programmeringskoncepter som funktioner, loops og betingede udsagn. Hvert kapitel tilbyder praktisk øvelse for at styrke din læring, kulminerende i spændende udfordringer, der tester dine færdigheder. Uanset om du er en komplet nybegynder eller ønsker at skærpe dine kodningsevner, giver dette kursus en omfattende og fornøjelig læringsoplevelse. Deltag og bliv en kodningsninja!
3 timer 28 kapitlerBegynder
19 STUDERER NU
kursus
Javascript Logik og Interaktion
Behersk væsentlige JavaScript-koncepter, herunder klasser, DOM-manipulation, eventhåndtering og asynkron programmering. Lær at skabe dynamiske og interaktive webapplikationer ved at håndtere brugerinteraktioner, hente og vise data samt håndtere asynkrone operationer effektivt. Gennem en kombination af teori, praktiske udfordringer og virkelighedsnære eksempler giver dette kursus dig de praktiske færdigheder, der er nødvendige for moderne webudvikling.
8 timer 45 kapitlerAvanceret
9 STUDERER NU
kursus
State Management med Redux Toolkit i React
Opdag styrken ved Redux Toolkit i samspil med React, og styrk dine færdigheder inden for state management. Dette kursus giver en omfattende introduktion til Redux Toolkit, et kraftfuldt bibliotek til håndtering af state. Lær at forenkle din Redux-opsætning, simplificere kompleks state-logik og skabe effektive, skalerbare React-applikationer.
4 timer 24 kapitlerAvanceret
1 STUDERER NU
Discover more Learning Tracks
spor
Spiludvikling med Unity
4 Kurser
164 OpgaverBegynder
4.4
(328)
spor
Videoproduktion med Adobe
4 Kurser123 OpgaverBegynder
5.0
(15)
spor
UI/UX Designværktøjer
4 Kurser161 OpgaverBegynder
4.8
(28)
spor
Essentielle Kontorfærdigheder
3 Kurser75 OpgaverBegynder
4.5
(940)
spor
Digital Marketing Essentials
6 Kurser293 OpgaverBegynder
4.5
(36)
spor
Complete Social Media Management
5 Kurser206 OpgaverBegynder
4.7
(25)
spor
Business AI Toolkit
3 Kurser42 OpgaverBegynder
4.2
(94)
spor
No-Code Webudvikling
3 Kurser180 OpgaverBegynder
4.3
(12)
spor
DevOps Specialist
6 Kurser91 OpgaverBegynder
4.0
(2)
spor
Supervised Learning Foundations
6 Kurser74 OpgaverBegynder
4.8
(19)
spor
Python from Zero to Hero
7 Kurser
2 Projekter132 OpgaverBegynder
4.7
(236)
spor
C Programming Fundamentals
7 Kurser70 OpgaverBegynder
4.6
(10)
Hvorfor Folk Vælger Codefinity
Web Developer
Kwizera Mugisha
The teaching methodology at Codefinity is excellent, and I particularly appreciate how it has prepared me to handle real-world coding problems. Currently, I am delving into Node.js and eagerly anticipate building full-stack projects that integrate all the knowledge I have gained.
Senior Business Analyst
Sherry Barnes-Fox
My first course was 4 hours, I did it in a few days, "nugget-style". The instructions are very clear and easy to understand. There is even a hint to help you get the answer. I love the learning style that is used, it engages me.
Accounts Payable Specialist
Bill Wagner
I have really liked the browser-based lessons that allow me to code within the lesson. The RUN button allows me to test the code I write before submitting for a grade.
IT Support Specialist
Daniel Chinea
I have gained a lot of practical and logical thinking skills, along with patience for myself and confidence in myself that I can learn programming. Years ago, I would have never thought that I could learn programming in any way, shape or form, and I was able to obtain these certifications and skills with Codefinity.
Technology Project Manager
Steve Bruening
The learning was progressive and made it easy to follow along and make progress. I could feel my skills increasing and building on each other as the course went along.
Project Manager
Stephanie Chan
As I went through the first course of the Python track, I liked the way the course was lay out (in easy and digestible modules) with little exercises at the end of each concept.
Step-by-Step to Stellar Results
Interaktivt kodningsmiljø
Dyk ned i vores interaktive miljø: skriv og kør din kode med feedback i realtid og succesmålinger—lær ved at gøre på hvert trin.
AI-drevet support
Udnyt den indbyggede AI-assistent til at forklare fejl, foreslå rettelser eller besvare spørgsmål om din kode—så du forbliver produktiv og aldrig går i stå.
Check your progress
Afslut hvert modul med en hurtig quiz, der giver øjeblikkelig feedback, sporer din fremgang og sikrer, at du har mestret nøglekoncepter.
Promote your expertise
Tjen dit brancheanerkendte certifikat ved afslutning og del det på LinkedIn med ét klik—lad dit netværk se, hvad du kan.
Betroet af Medarbejdere fra Ledende Virksomheder
og Studerende fra Topuniversiteter
Fuld adgang til kataloget
Et abonnement åbner dette kursus og hele vores katalog af projekter og færdigheder.Features:
500+ Topbedømte kurserBanebrydende AI Copilot
Personlige studieveje40+ praktiske virkelige projekter
Uden afbestilling, før den valgte rabatplan udløber, accepterer jeg, at Codefinity automatisk opkræver $104 hver 3. måned indtil jeg annullerer. Læs mere om afbestillings- og refunderingspolitikken på Abonnementsvilkår.
Prøv Codefinity med tillid – 30-dages pengene-tilbage-garanti inkluderet
For at byde dig velkommen til Codefinity, tilbyder vi op til 64% rabat på vores kurser. Plus, vi har en 30-dages pengene-tilbage-garanti, så du kan prøve os uden risiko.Vi ser virkelig frem til at byde dig velkommen til vores platform og er engagerede i at gøre din læringsoplevelse nem, interaktiv og sjov.
Ready to get started?
Pro
Best intro offer
Ultimate
A complete experience
to kickstart your career
to kickstart your career
500+ Top-Rated courses
Completion certificates
Early access to new courses
40+ hands-on Real-world projects
Personalized study tracks
Unlimited workspaces
Få øjeblikkelig adgang til 500+ kurser
Ubegrænset Læring, Øjeblikkelig AdgangFå fuld adgang til alle kurser og spor, inklusive videoindhold, quizzer og dybdegående materialer—start læring når som helst.
Brancheanerkendte CertifikaterTjen certifikater, der validerer din ekspertise og styrker din karriere inden for tech, AI, data, marketing og mere.
KI-assisteret læringFå personlige hints, feedback i realtid og AI-drevne forklaringer for at fremskynde din fremgang.
Konstant Udvidelse: Nye Kurser & KarriereforløbHold dig foran med konstant opdaterede kurser, karriereplaner, udfordringer og praktiske prøver.
Opbyg Færdigheder Der TællerMestre efterspurgte færdigheder med kurser i AI, datavidenskab, programmering, marketing, automatisering, webudvikling og mere.
Interaktiv & Problemfri LæringEngager dig med praktiske projekter, virkelige øvelser og en intuitiv læringsoplevelse — ingen ekstra værktøjer nødvendige.
