Crearea proiectului de NextJS
Last updated
Last updated
Pentru a putea crea un proiect de NextJS avem nevoie de un terminal unde să putem rula comanda care să creeze acest tip de proiect.
Puteți să folosiți terminalul pus la dispoziție de Visual Studi Code sau să deschideți un alt terminal extern (ex: Git Bash - posibil să mai existe erori cu Git Bash).
Pentru a fi mai ușor, o să lucrăm un terminalul pus la dispoziție de editorul de cod.
Mergem la secțiunea Terminal -> New Terminal și se va deschide un nou terminal în partea de jos a editorului.
După ce s-a deschis terminalul, folosim următoarea comandă pentru crearea proiectului:
Pentru a putea rula comanda, trebuie să avem instalat NodeJS.
!! Atunci când instalați pentru prima dată un proiect de NextJS, există posibilitatea să vă întrebe dacă acceptați să instaleze un pachet de care are nevoie pentru a putea continua, și o să tastăm Y și o să apăsăm enter. !!
După ce am apăsat enter, o să trecem printr-o serie de întrebări unde trebuie să răspundem în funcție de preferințele și necesitățile noastre.
Pentru acest proiect, am decis să continuăm cu JavaScript, ESLint (pentru erori) și Tailwind CSS (pentru stiluri).
Totodată, am selectat să nu avem un folder src și că nu vrem să folosim App Router.
Dacă vreți să vedeți mai multe diferențe între variantele App Router și Pages Router legate de configurarea proiectului de NextJS: https://medium.com/@jawaragordon/choose-your-own-adventure-next-js-app-vs-pages-router-528dbf25b37f
După crearea proiectului, o să putem să vedem toate fișierele care s-au creat și că acestea apar cu verde.
Pentru a putea fi mai ușor de gestionat și de navigat, o să mutăm tot conținutul folderului next-app direct în folderul CloudComputing (repository-ul clonat de pe GitHub) și ștergem folderul next-app.
Deoarece proiectul creat a venit by default cu un fișier de .gitignore, o să îi dăm replace celui creat de GitHub.
Navigăm în fișierul package.json pentru a putea vedea lista de comenzi pe care o avem la dispoziție.
Tot aici, o să putem să vedem și librăriile pe care le-a instalat pentru a crea acest proiect la secțiunea dependencies și devDependencies.
Diferența dintre dependencies și devDependecies este faptul că proiectul are neapărat nevoie de librăriile de la dependecies pentru a putea rula, în schimb cele de la devDependencies sunt opționale.
Pentru a porni proiectul, o să ne ducem în terminal și o să tastăm următoarea comandă:
După rularea comenzii, o să putem vedea în consolă că proiectul a pornit și că este disponibil la adresa http://localhost:3000.
Deschidem un browser, tastăm adresa http://localhost:3000 și ar trebui să putem vedea proiectul nostru care a reușit să pornească.
Prima dată se încarcă mai greu, deoarce trebuie să compileze fișierele pe care urmează să le servească.
Primul pas pe care trebuie să îl facem pentru actualizarea contului pe GitHub este să oprim aplicația.
Pentru a opri aplicația, o să ne mutăm cu mouse-ul în terminalul proiectului unde ruleaza aplicația și o să folosim combinația de taste CTRL + C.
Dacă o să ne uităm cu atenție la fișiere, o să putem să vedem ca unele fișiere sunt gri sau colorate.
Dacă unele foldere/fișiere sunt colorate cu gri, asta înseamnă ca sunt menționate în cadrul fișierului de .gitignore și că nu o să fie urcate nicioadată în repository-ul nostru de pe GitHub. În cazul nostru, nu o să urcăm locul în care s-au instalat librăriile (node_modules).
Pentru a urca proiectul pe GitHub, trebuie să tastăm următoarele comenzi, pe rand:
Folosim comanda 'git add .' pentru a preciza faptul că vrem să urcăm pe GitHub toate modificările.
Prin comanda 'git commit' precizăm un mesaj pentru codul pe care urmează să îl urcăm, astfel încât să ne putem întoarce oricând în timp la această versiune de cod.
Prin comanda 'git push', actualizăm codul de pe GitHub pe branch-ul pe care ne aflam când am realizat commit-ul.
După rularea comenzilor, ne întoarcem pe GitHub, unde putem vedea codul actualizat.
Dacă mergem la secțiunea 'Commits', o să putem să vedem lista de commit-uri realizată până în momentul de față.
node_modules
Folderul "node_modules" într-un proiect Next.js conține modulele și dependențele folosite de proiectul Next.js.
pages
Acesta conține fișierele JavaScript sau TypeScript care definesc rutele aplicației web.
Fiecare fișier în directorul "pages" reprezintă o rută a aplicației, iar structura sa determină structura de rute a proiectului Next.js.
public
Este un director unde sunt stocate resursele statice, cum ar fi imagini, fișiere CSS sau orice alt fișier accesibil publicului direct prin URL-uri. Acest director este utilizat pentru a găzdui resursele care nu necesită prelucrare specială de către serverul Next.js și care pot fi servite direct către clienți.
styles
Poate conține fișiere CSS, SCSS, sau alte tipuri de fișiere de stil utilizate pentru a defini aspectul și stilul aplicației web. Acesta este un loc comun pentru organizarea și gestionarea fișierelor de stil utilizate în proiectul Next.js.
.eslintrc.json
Este un fișier de configurare pentru ESLint, care este utilizat pentru a specifica regulile de analiză statică a codului pentru un proiect JavaScript. Este scris în formatul JSON și poate conține reguli personalizate sau să utilizeze un set predefinit de reguli pentru a asigura consistența și calitatea codului în proiect.
.gitignore
Acesta specifică fișierele și directoarele care trebuie ignorate de Git în timpul urmăririi modificărilor într-un repository. Fișierele și directoarele listate în fișierul ".gitignore" nu vor fi incluse în commit-urile Git și nu vor fi considerate de sistemul de control al versiunilor. Acest fișier este util pentru a exclude fișiere temporare, fișiere generate automat sau orice alte fișiere care nu ar trebui să fie incluse în repository-ul Git.
next.config.mjs
Este un fișier de configurare pentru proiectele Next.js, scris în formatul module JavaScript (MJS). Acesta este utilizat pentru a specifica diverse setări și opțiuni pentru proiectul Next.js, cum ar fi configurarea pentru modulele, rutele personalizate, setările de webpack și multe altele.
Utilizarea acestui fișier permite personalizarea și extinderea comportamentului implicit al proiectului Next.js conform nevoilor specifice ale proiectului.
tailwind.config.js
Este un fișier de configurare pentru Tailwind CSS, un framework utilitar de CSS. Acest fișier este folosit pentru a personaliza și configura setările framework-ului Tailwind CSS, inclusiv definirea culorilor, marginilor, fonturilor, variabilelor și multe altele. Personalizând acest fișier, dezvoltatorii pot ajusta și optimiza stilurile Tailwind CSS pentru a se potrivi cu nevoile specifice ale proiectului lor.
Cheile de mediu (environment keys) sunt folosite pentru a gestiona variabilele de mediu specifice ale unei aplicații.
Acestea sunt utile atunci când dorim să configurăm anumite aspecte ale aplicației în funcție de mediul în care rulează aceasta.
Foarte Important de știut despre fișierul de .env:
În acest fișier o să salvăm chei pentru a putea folosi diferite API-uri (ex: OpenAi) sau detaliile de conectare la baza de date (ex: MongoDB)
!! Cheile din cadrul acestui fișier sunt secrete și nu trebuie divulgate altor persoane sau urcate pe GitHub. !!
Pentru a crea un astfel de fișier, o să ne întoarcem în cod și o să facem un nou fișier, denumit .env care să fie la același nivel ierarhic cu celelalte fișiere importante pentru a putea rula proiectul (ex: package.json).
După cum putem observa, fișierul nou creat este colorat cu verde, deci trebuie să mergem în cadrul fișierului .gitignore pentru a îi spune să nu mai urmărească acest fișier.
După ce am efectuat schimbările și am salvat, o să observăm ca fișierul care va conține cheile de mediu, are o culoare gri, însemnând faptul că nu mai este urmărit de către Git.
