Next.JS

Next.JS er en open source framework til React.js, som hjælper med at bygge server-side renderede React-applikationer. Next.JS er kendt for sin evne til at håndtere SEO og ydeevne på en enkel måde. Det er også kendt for at understøtte både server-side og client-side rendering.

Eksempler på Next.JS

Her er et eksempel på en simpel Next.JS-komponent, der viser en liste over brugere:

import React from 'react';

const users = [
  { name: 'John', age: 26 },
  { name: 'Jane', age: 28 },
  { name: 'Bob', age: 30 },
];

const UserList = () => (
  <div>
    <h1>Users</h1>
    <ul>
      {users.map(user => (
        <li key={user.name}>
          {user.name}, {user.age}
        </li>
      ))}
    </ul>
  </div>
);

export default UserList;

Sådan sætter du Next.JS op

1. Først skal du installere Next.JS ved at køre følgende kommando i terminalen:

npm install next react react-dom

1. Opret en ny fil ved navn pages/index.js, og tilføj følgende kode:

import React from 'react';

const Home = () => (
  <div>
    <h1>Hello world!</h1>
    <p>Welcome to my Next.JS app.</p>
  </div>
);

export default Home;

1. Start applikationen ved at køre følgende kommando i terminalen:

npm run dev

1. Gå til http://localhost:3000 i din webbrowser for at se din Next.JS-applikation i aktion.

Det var en kort guide til at sætte Next.JS op og et eksempel på en simpel Next.JS-komponent. Der er mange flere funktioner og muligheder med Next.JS, som du kan udforske, når du er klar til det.