This is a Next.js 14 project bootstrapped with create-next-app and next-page-router-scaffold-2024.

Prerequisites

Node.js version >=18.17.0 is required by Next 14.

Node.js version >=20.12.2 is recommended by next-page-router-scaffold-2024

Getting Started

First, install dependencies:

npm install

Next, run the development server:

npm run dev

React Pages

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying src/app/views/HomePage. The page auto-updates as you edit the file. The Route for this page is defined by src/pages/index.ts.

API Routes

The src/pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

An example can be accessed at http://localhost:3000/api/ping.

This endpoint's controller can be edited in src/api/controllers/PingController. The Route for this endpoint is defined by src/pages/api/ping.ts.

Component Library

To run the storybook dev server:

npm run storybook

To generate a static build that can be independently deployed:

npm run storybook:build

Other Commands

To run the linter:

npm run lint

To run tests once:

npm test

To run test watcher:

npm run test:watch

To run coverage report:

npm run test:coverage

A full list of commands can be found in the package.json

Code Generation

As of 2024, this scaffold now comes with a .fttemplates directory, to be used with the Folder Templates VSCode plugin: https://marketplace.visualstudio.com/items?itemName=Huuums.vscode-fast-folder-structure

If you have this plugin installed, you will have the option to generate scaffolded components, views, or API controllers. Right-click on the directory in the tree, and select "Create New Templated Folder" to try it out.

Learn More

Typescript

• Typescript Documentation - Typescript's official documentation.
• Typescript Handbook - The Typescript Handbook.
• Typescript in 5 Minutes - Learn Typescript, for Javascript Programmers.

React

• React Documentation - a detailed reference documentation for working with React.
• Learn React - an introduction to the 80% of React concepts that you will use on a daily basis.

Next.js

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

Tailwind and Styled Components

• Tailwind CSS Documentation - Documentation for Tailwind CSS.
• Styled Components Documentation - Documentation for Styled Components.
• Tailwind Styled Components - A package this scaffold uses to help them play nice together. Please read the docs to be aware of any gotchas.

Deploy

Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out the Next.js deployment documentation for more details.

Netlify

I have also had success deploying Next.js apps using this scaffold to Netlify.

If you are looking to move away from Vercel, check them out.

Storybook

Storybook can be built for production for use as a component library. If you want to do this, there are plenty of options. The output of the build should not require server interaction, so it is a matter of putting into a bucket and pointing a domain at it.

This can be done in AWS with an S3 bucket and Cloudfront, or in GCP with similar tools.

However, one of the quickest, easiest ways I've found is to use Firebase Hosting, which has some handly CLI tools out of the box, and requires very little configuration.