Next.js — Start web development with Next.js & create-next-app

What is Next.js

Installation

Update — December 2019

npx create-next-app your-app-name
cd your-app-name
yarn dev
yarn dev
Starts the development server.
yarn build
Builds the app for production.
yarn start
Runs the built app in production mode.

Old Version


mkdir next-project
cd next-project
npm init -y
npm install --save react react-dom next
mkdir pages
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "next",
"build": "next build",
"start": "next start"
}
with npm:
npm run dev
with yarn:
yarn dev
const Index = () => (
<div>
<p>Hello Next.js</p>
</div>
);

export default Index;

Eslint Configuration

Routing

import React from 'react';
import Link from 'next/link';
const About = () => (
<div>
<Link href="/">
Home
</Link>
<p>About page</p>
</div>
);
export default About;
import React from 'react';
import Link from 'next/link';
const Home = () => (
<div>
<Link href="/about">
Home
</Link>
<p>Home page</p>
</div>
);
export default Home;

Conclusion

Senior Full Stack Software Engineer — Javascript — Berlin

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store