> For the complete documentation index, see [llms.txt](https://lungu-mihai-adrian.gitbook.io/cloud-computing-2026-simpre/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lungu-mihai-adrian.gitbook.io/cloud-computing-2026-simpre/seminar-1/crearea-proiectului-de-nextjs.md).
# Crearea proiectului de NextJS
## 1. Deschiderea unui terminal
Pentru a putea crea un proiect de Next.js, 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 Studio 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 la 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:
```
npx create-next-app@latest
```
{% hint style="info" %}
Pentru a putea rula comanda, trebuie să avem instalat **Node.js.**
{% endhint %}
**!!** 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 la care 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.
{% hint style="info" %}
Dacă vreți să vedeți mai multe diferențe între variantele **App Router** și **Pages Router** legate de configurarea proiectului de NextJS:
{% endhint %}
După crearea proiectului, o să putem să vedem toate fișierele care s-au creat și să vedem 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 să ș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.
## 2. Pornirea proiectului
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 devDependencies este faptul că proiectul are neapărat nevoie de librăriile de la dependencies 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ă:
```
npm run dev
```
După rularea comenzii, o să putem vedea în consolă că proiectul a pornit și că este disponibil la adresa \*\*[http://localhost:3000\*\*.\ ](https://lungu-mihai-adrian.gitbook.io/cloud-computing-2026-simpre/seminar-1/http:/localhost:3000**.\ );
Deschidem un browser, tastăm adresa **** și ar trebui să putem vedea proiectul nostru care a reușit să pornească.
{% hint style="info" %}
Prima dată se încarcă mai greu, deoarece trebuie să compileze fișierele pe care urmează să le servească.
{% endhint %}
## 3. Actualizarea repository-ului pe GitHub
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 rulează 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 că unele fișiere sunt **gri** sau **colorate**.
Dacă unele foldere/fișiere sunt colorate cu gri, asta înseamnă că sunt menționate în cadrul fișierului de .gitignore și că nu o să fie urcate nicio dată î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:
```git
git add .
```
Folosim comanda '**git add .**' pentru a preciza faptul că vrem să urcăm pe GitHub toate modificările.
```git
git commit -m 'message'
```
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.
```git
git push
```
Prin comanda '**git push**', actualizăm codul de pe GitHub pe branch-ul pe care ne aflăm 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ță.
## 4. Conținutul proiectului
* **node\_modules**
Folderul "node\_modules" într-un proiect Next.js conține modulele și dependențele folosite de proiectul Next.js.
* **app**
Folderul **`app`** din Next.js reprezintă sistemul modern de organizare a aplicației, numit **App Router**. În el se definesc paginile, layout-urile, rutele dinamice și API-urile, iar structura folderelor corespunde direct cu structura URL-urilor din aplicație. De exemplu, `app/page.js` reprezintă pagina principală `/`, iar `app/users/page.js` reprezintă ruta `/users`.
* **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 poate utiliza 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.
## 5. Crearea cheilor de mediu
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.
{% hint style="danger" %} **Foarte Important de știut despre fișierul de .env:**
1. Î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)
2. **!!**** Cheile din cadrul acestui fișier sunt secrete și nu trebuie divulgate altor persoane sau urcate pe GitHub ****!!**
{% endhint %}
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.
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://lungu-mihai-adrian.gitbook.io/cloud-computing-2026-simpre/seminar-1/crearea-proiectului-de-nextjs.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.