Summary  
This chapter covers how to scaffold a new Next.js application from a template using a CLI tool and start its local development server.  

General domain of usage  
Web development

## Avvio di un nuovo progetto
Per avviare un nuovo progetto con Next.js, navigare nella cartella in cui si desidera mantenere il progetto ed eseguire il seguente comando nel terminale:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/notiflix@2.7.0/dist/notiflix-aio-2.7.0.min.css">
    <link rel="stylesheet" href="https://content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/text-boxes-section/copyable-text-box.css">
  </head>
  <body>
    <div class="text-widget">
      
      
      <textarea class="text-field" id="Your id" style="height: 70px; max-width: 100%">
npx create-next-app@latest . --use-npm --example "https://github.com/olreyplay/tradehub-template"</textarea>
      <button class="copy-button" onclick="handleClick('Your id', 'widget1-notify')">
        <svg width="20" height="20" x="0" y="0" viewBox="0 0 32 32" style="enable-background: new 0 0 512 512" xml:space="preserve" class="">
          <g>
            <path d="m26.121 6.707-3.828-3.828A2.98 2.98 0 0 0 20.172 2H12a3.003 3.003 0 0 0-3 3v1H8a3.003 3.003 0 0 0-3 3v18a3.003 3.003 0 0 0 3 3h12a3.003 3.003 0 0 0 3-3v-1h1a3.003 3.003 0 0 0 3-3V8.829a2.982 2.982 0 0 0-.879-2.122ZM22 5.414 23.586 7H22ZM20 28H8a1.001 1.001 0 0 1-1-1V9a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1ZM18 9.414 19.586 11H18ZM24 24h-1V12.829a2.982 2.982 0 0 0-.879-2.122l-3.828-3.828A2.98 2.98 0 0 0 16.171 6H11V5a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1Zm-6-8h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Z" fill="#a6b8e6" opacity="1" data-original="#000000" class=""></path>
          </g>
        </svg>
      </button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/notiflix@2.7.0/dist/notiflix-aio-2.7.0.min.js"></script>
    <script src="https://content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/text-boxes-section/copyable-text-box.js"></script>
  </body>
</html>

Questo comando configurerà un'applicazione Next.js utilizzando `create-next-app`, uno strumento da riga di comando (CLI). Utilizzando il flag `--example` insieme al template di esempio per questo corso, si avrà accesso a un template predefinito da utilizzare come base per il proprio progetto.

## Avvio del server di sviluppo
Per visualizzare l'app localmente, avviare il server di sviluppo utilizzando il comando fornito di seguito:


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/notiflix@2.7.0/dist/notiflix-aio-2.7.0.min.css">
    <link rel="stylesheet" href="https://content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/text-boxes-section/copyable-text-box.css">
  </head>
  <body>
    <div class="text-widget">
      
      <input type="text" class="text-field" id="widget1-text" value="npm run dev">
      <button class="copy-button" onclick="handleClick('widget1-text', 'widget1-notify')">
        <svg width="20" height="20" viewBox="0 0 32 32" xml:space="preserve">
          <g>
            <path d="m26.121 6.707-3.828-3.828A2.98 2.98 0 0 0 20.172 2H12a3.003 3.003 0 0 0-3 3v1H8a3.003 3.003 0 0 0-3 3v18a3.003 3.003 0 0 0 3 3h12a3.003 3.003 0 0 0 3-3v-1h1a3.003 3.003 0 0 0 3-3V8.829a2.982 2.982 0 0 0-.879-2.122ZM22 5.414 23.586 7H22ZM20 28H8a1.001 1.001 0 0 1-1-1V9a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1ZM18 9.414 19.586 11H18ZM24 24h-1V12.829a2.982 2.982 0 0 0-.879-2.122l-3.828-3.828A2.98 2.98 0 0 0 16.171 6H11V5a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1Zm-6-8h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Z" fill="#a6b8e6"></path>
          </g>
        </svg>
      </button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/notiflix@2.7.0/dist/notiflix-aio-2.7.0.min.js"></script>
    <script src="https://content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/text-boxes-section/copyable-text-box.js"></script>
  </body>
</html>

Puoi visualizzare la homepage aprendo il seguente URL <a href="http://localhost:3000/" target="_blank" style="color: #ff8a00; font-weight: 600; text-decoration: none; transition: .3s ease-in-out" onmouseover="this.style.color='#ff0000'" onmouseout="this.style.color='#d27204'" ><svg width="1em" height="1em" viewBox="0 0 30 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="#098f67" style="stroke: var(--color1, #098f67)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.4156" d="M17.289 17.305v0c-1.754 1.754-4.597 1.754-6.351 0l-7.76-7.759c-1.755-1.755-1.755-4.601 0-6.356v0c1.753-1.753 4.595-1.756 6.351-0.005l6.208 6.187"></path><path fill="none" stroke="#098f67" style="stroke: var(--color1, #098f67)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.4156" d="M12.504 13.97v0c1.754-1.754 4.597-1.754 6.351 0l7.762 7.762c1.754 1.754 1.754 4.597 0 6.351v0c-1.754 1.754-4.597 1.754-6.351 0l-5.953-5.953"></path></svg> http://localhost:3000/</a> nel browser. Dovrebbe apparire così: 

Nel prossimo capitolo, analizzeremo la struttura delle cartelle dei file di progetto.

Impara a creare applicazioni web moderne e ad alte prestazioni utilizzando Next.js. Configura progetti con layout strutturati, stile e routing per una navigazione fluida. Recupera e visualizza dati in modo efficiente ottimizzando il rendering e le prestazioni. Implementa funzionalità avanzate come paginazione, operazioni CRUD e ricerca globale per applicazioni web dinamiche. Distribuisci i tuoi progetti Next.js, collegali a database e aggiungi l'autenticazione per proteggere i dati degli utenti.

Discutiamo le conoscenze necessarie prima di approfondire il framework Next.js, cosa aspettarsi da questo corso e cosa realizzerai.

Imposteremo il progetto, esamineremo i metodi per aggiungere lo stile alla nostra applicazione e tratteremo aspetti visivi come immagini, font, pagine e layout.

Scopri come creare e gestire facilmente una nuova vista per la tua applicazione e navigare tra tutte le pagine senza interruzioni grazie a un sistema di routing integrato.

Distribuire l'app Next.js utilizzando account GitHub e Vercel. Inoltre, configurare un database per fornire all'app i dati necessari.

Considerare come ottenere e mostrare i dati all'utente in modo chiaro ed efficiente.

Scopri come implementare funzionalità web moderne come paginazione, operazioni CRUD, ricerca globale, validazione dei moduli e altro ancora.

Implementazione dell'autenticazione in Next.js.

Configurazione del Progetto Next.js

Avvio di un nuovo progetto

Avvio del server di sviluppo

In pratica

Awesome!

Configurazione del Progetto Next.js

Avvio di un nuovo progetto

Avvio del server di sviluppo

In pratica