Vad behöver du?

• Komma igång med Next.js
• Installera Next.js
• Installera React

För att komma igång behöver du bara lite grundläggande kunskaper om React och JavaScript

Next.js är ett JavaScript-ramverk. Det låter dig bygga rendering på serversidan och statiska webbapplikationer med React. Det är ett bra verktyg för att bygga din nästa webbplats. Det har många fantastiska funktioner och fördelar, som kan göra Nextjs till ditt första alternativ för att bygga din nästa webbapplikation.

Du behöver ingen konfiguration som webpack eller liknande för att börja använda Next.js. Det kommer med sin konfiguration. Allt du behöver är att köra

npm run dev

och börja bygga din applikation.

Komma igång med Next.js

För att börja med Next.js måste du ha node.js installerat i din maskin och det är allt. Next.js är som alla andra node.js-applikationer - du behöver npm eller Yarn för att installera de paket du beöver i ditt projekt.

Låt oss komma igång och skapa ett Next.js-projekt.

Först måste vi skapa en mapp och ge den ett valfritt namn. Tex nextjs-app Skapa en folder med det namnet och hoppa sedan in i den foldern

mkdir nextjs-app && cd next-js

Installera Next.js

npm i next --save

Installera React

npm i react react-dom --save

Efter det måste du skapa två nödvändiga mappar: pages och static. Next.js fungerar inte utan dem !!

mkdir pages static

Du måste ha följande struktur i ditt projekt nu:

nextjs-app -pages -static -package.json

Och sedan kan du helt enkelt köra

npm next dev

Öppna sedan http://localhost:3000/

Du kommer nu få ett förväntatd felmedelande i form av:

404 | Page not found

Detta pga att det inte finns någon start sida än, så låt oss skapa den och döp den index.js och vår "entry point" home.js

touch index.js home.js

I home.js filen skriv följande kod:

import React, { Component } from "react"

class Home extends Component {
    render() {
        return(
            <div>
                <h1>Hello, from the Home page</h1>
            </div>
        )
    }
}

export default Home

och sedan i index.js filen skriver du följande:

import React from "react"
import Home from "./home"

const App = () => (
    <div>
        <Home />
    </div>
)

export default App

Next.js har en live-omladdningsfunktion. Allt du behöver göra är bara att ändra och spara, Öppna sedan http://localhost:3000/ och Next.js kommer att kompilera och ladda appen automatiskt åt dig.

Obs: Next.js är som alla andra renderingsverktyg på serversidan som vi behöver för att definiera start sidan för vår applikation, i vårt fall är index.js.

Du kommer att se denna förändring i webbläsaren:

Hello, from the Home page

Grattis! Vi skapade just en Next.js-app med några enkla steg. Dessa instruktioner för att skapa en Next.js-app beskrivs i de officiella dokumenten för Next.js