Boilerplate Nextjs

Boilerplate Nextjs is a Next.js starter template that bundles TypeScript, Styled Components, Jest, React Testing Library, Storybook, ESLint, Prettier, and Husky so you can begin coding with testing and linting already configured.

What is Boilerplate Nextjs?

This boilerplate is built for the React Avançado course and provides a pre-configured Next.js project. It takes your source code and a development server as input and produces a running application with a test suite, lint checks, and a component storybook. It runs on Next.js, with pages located in pages/index.js, and is available on GitHub for anyone to use. The template is specifically designed to support the curriculum of the React Avançado course.

Key Features

• Next.js framework — Server-side rendering, routing, and API capabilities come from Next.js; npm run dev launches the development server at localhost:3000.
• TypeScript — Type checking is pre-configured so you can write typed React components from the start.
• Styled Components — CSS-in-JS styling is integrated, allowing scoped and dynamic styles within components.
• Jest — The test runner is set up to execute tests on all components and pages using npm test or npm run test:watch.
• React Testing Library — Works alongside Jest to render components and assert behavior in tests.
• Storybook — A UI development environment runs on localhost:6006 via npm run storybook, and npm run build-storybook creates a static build.
• ESLint — npm run lint checks all components and pages against the configured rules.
• Prettier — Automatic code formatting is part of the development stack.
• Husky — Git hooks are included to enforce quality checks, as reflected in the repository's topics.

Who is it for?

• Developers starting a new Next.js project who want to avoid manually configuring multiple tools.
• React Avançado course students who need the exact starting point used in the lessons.
• Frontend teams that standardize on Next.js and want a shared baseline with Storybook for component development and Jest for unit testing.

What can you do with Boilerplate Nextjs?

• Spin up a local dev environment: Run npm run dev to serve the app at http://localhost:3000 and edit pages/index.js to see live reloads.
• Run automated tests: Use npm test to run the Jest suite, or npm run test:watch to re-run on file changes.
• Build and serve a production bundle: npm run build creates the optimized build, and npm start serves it with a simple server.
• Document components with Storybook: npm run storybook opens the component explorer at localhost:6006, and npm run build-storybook exports a static site.
• Deploy to Vercel: The README points to the Vercel platform, which is designed for Next.js deployments.

How does Boilerplate Nextjs work?

After cloning the repository, install dependencies and run npm run dev. The development server watches pages/index.js and auto-updates the browser. For production, run npm run build followed by npm start. The remaining npm scripts cover linting, testing, and Storybook, giving you a complete workflow without extra configuration.

FAQ

How do I start the development server?

Run npm run dev or yarn dev in the project root, then open http://localhost:3000. The page auto-updates when you edit pages/index.js.

What is the difference between npm run dev and npm start?

npm run dev starts a development server with hot reloading for active coding. npm start serves the production build created by npm run build, which is optimized for performance.

What tools are included for testing?

Jest is configured as the test runner, and React Testing Library provides utilities for rendering components. Use npm test to run the suite once or npm run test:watch to enable watch mode.