Front-End Workflow for Next.js

1) Setup

yarn create next-app
# OR
npx create-next-app
# AND
npm i -g create-next-app

2) Pages & Routes

• Home
• About
• Others...

3) Layout Components

• Navigation Bar
• Header
• Footer
• Layout

4) Styling

• Choosing a Theme
• 404 Error Page
• Responsive Design

5) Database

• MongoDB
• REDIS
• MySQL
• Others...

6) Fetching

// Basic Example
import fs from "fs";
import path from "path";

export async function getStaticPaths() {
    const files = fs.readdirSync(path.join("blogs"));

    const paths = files.map((filename) => ({
        params: {
            slug: filename.replace(".txt", ""),
        },
    }));

    return {
        paths,
        fallback: false,
    };
}

export async function getStaticProps(context) {
    const blog = fs.readFileSync(
        path.join("blogs", context.params.slug + ".txt"),
        "utf-8"
    );

    const content = blog;

    return {
        props: {
            content,
        },
    };
}

7) Dynamic Routing

• /Content/index.js
• /Content/[slug].js

8) Testing

• ES6 or ES2016+

# Dependencies
npm install --save-dev eslint
npm install --save-dev eslint-config-next

npm run lint

• QUnit

npm install --save-dev qunit

• Mocha experience

Matching "Test" file structures

• Others...

9) Deployment

• Vercel
• Others...

OTHERS

• SEO

# Basic Example
npm i --save-dev next-seo

• Optimization