SoPra FS25 - Next.js Client Template bootstrapped with create-next-app
Read and go through these Tutorials. It will make your life easier:)
- Read the React Docs
- Do this React Getting Started Tutorial (it doesn't assume any existing React knowledge)
- Get an Understanding of CSS, SCSS, and HTML!
Next, there are two other technologies that you should look at:
- react-router-dom offers declarative routing for React. It is a collection of navigational components that fit nicely with the application.
- react-hooks let you access the router's state and perform navigation from inside your components.
Helpful documentation can be found here:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
For your local development environment, you will need Node.js.
We urge you to install the exact version v20.11.0 which comes with the npm package manager. You can download it here.
If you are confused about which download to choose, feel free to use these direct links:
- MacOS: node-v20.11.0.pkg
- Windows 32-bit: node-v20.11.0-x86.msi
- Windows 64-bit: node-v20.11.0-x64.msi
- Linux: node-v20.11.0.tar.xz (use this installation guide if you are new to Linux)
If you happen to have a package manager the following commands can be used:
- Homebrew:
brew install node@20.11.0 - Chocolatey:
choco install nodejs-lts --version=20.11.0
After the installation, update the npm package manager to 10.4.0 by running npm install -g npm@10.4.0
You can ensure the correct version of node and npm by running node -v and npm --version, which should give you v20.11.0 and 10.4.0 respectively.
Before you start your application for the first time, run this command to install all other dependencies, including React:
npm install
Next, you can start the app with:
npm run dev
Now you can open http://localhost:3000 to view it in the browser.
This project uses next/font to automatically optimize and load Inter, a custom Google Font.
Notice that the page will reload if you make any edits. You will also see any lint errors in the console (use a Chrome-based browser).
The client will send HTTP requests to the server which can be found here.
In order for these requests to work, you need to install and start the server as well.
Testing is optional, and you can run the tests with npm run test
This launches the test runner in an interactive watch mode.
See the section about running tests for more information.
For macOS user running into a 'fsevents' error: jest-community/vscode-jest#423
Finally, npm run build builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance:
The build is minified, and the filenames include hashes.
See the section about deployment for more information.
To learn React, check out the React documentation.
Thanks to Marco Leder for creating the template.