Welcome to Nexcratch!
Nexcratch or NextJS from Scratch is the simplest Next.js boilerplate built from scratch. It provides a clean and minimal starting point for your Next.js projects, allowing you to focus on building your application out of the box.
https://github.com/Imjoma/next16-from-scratch-boilerplateYou may also want make the installation on your own. Follow this step-by-step guide instead.
Step-by-Step Guide: Install Next.js from Scratch
Step 1: Ensure Node.js is Installed. Make sure you have Node.js installed on your system (version 14 or later). You can verify your installation in your terminal by running node -v.
Step 2: Create Your Project Directory and Initialize npm. Navigate to your desired directory in the terminal. Create a new folder for your project using mkdir my-nextjs-app and then move into it with cd my-nextjs-app. Initialize it as a Node.js project by running npm init -y.
Step 3: Install Required Packages. Install the necessary Next.js, React, and React DOM packages using the command npm install next react react-dom.
Step 4: Add Development Scripts. Open the package.json file and manually add the following scripts within the "scripts" object: "dev": "next dev", "build": "next build", "start": "next start", and "lint": "next lint".
Step 5: Create Necessary Files and Folders. Next.js requires specific folders. Create the application directory using mkdir app and the public directory using mkdir public. Then, create the necessary files: touch app/layout.jsx and touch app/page.jsx.
Step 6: Add Code to the Page and Layout Files. Add minimal React components to your new files. The app/layout.jsx file needs a root layout component that returns an <html> structure. The app/page.jsx file needs a default exported component for the home page content.
Step 7: Run the Development Server. Start your application's development server using the command npm run dev.
Frequently Asked Questions (FAQ)
Q: Why use this repository instead of the official `create-next-app` command?
The official installer sometimes leads to environmental conflicts, especially on Windows or specific configurations of Node.js/NPM. This repository provides a pre-configured, battle-tested boilerplate that bypasses those common installation headaches.
If you have ever encountered issues like `'install' is not recognized as a command` or `Module not found` errors, this repository is the stable starting point you are looking for.
Q: What is included in this boilerplate?
- Next.js (Latest stable version): Using the modern App Router structure.
- React & React DOM: Core libraries for building user interfaces.
- Geist Font: A clean, modern default font.
- SEO Metadata: Configured to handle titles and descriptions automatically.
- Vanilla CSS Structure: Uses standard CSS for styling flexibility.
Q: How do I run this project locally?
1. Clone the repository to your local machine.
2. Navigate into the project folder in your terminal.
3. Install dependencies: npm install
4. Run the development server: npm run dev
5. View in your browser at http://localhost:3000.
Q: I still get errors running `npm run dev` on Windows. What should I do?
To contribute your idea, such as a solution for the Windows 'Module not found' error, you should submit a Pull Request (PR) to the repository.
1. Fork the Repository
2. Clone Your Fork
3. Create a New Branch
4. Make Your Changes
5. Commit and Push
6. Fill out the PR form