- Clone this repository
git clone git@github.com:neondatabase/website.git- Install dependencies
npm install- Fill environment variables
cp .env.example .envnpm run devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying src/app/page.jsx. The page auto-updates as you edit the file.
npm run buildnpm run startnpm run check:broken-links -- https://neon.techThe command may take time, be patient. You can also specify which part of the website you want to check by passing a specific URL, for example https://neon.tech/docs for checking the Docs
N.B. The automatic check is done every Monday at midnight by GitHub CI. You can find the reports on the "Actions" tab
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.
├── content — Documentation sources in `mdbook` format, see [Documentation](#docs) section
├── public
├── src
│ ├── app
│ ├── components
│ │ ├── pages — React components that are being used specifically on a certain page
│ │ └── shared — React components that are being used across the whole website
│ ├── hooks
│ ├── icons
│ ├── images
│ ├── lib
│ ├── scripts
│ ├── styles
│ ├── utils
├── next.config.js — Main configuration file for a Next.js site. Read more about it [here](https://nextjs.org/docs/api-reference/next.config.js/introduction)
├── postcss.config.js — Main configuration file of PostCSS. [Read more about it here](https://tailwindcss.com/docs/configuration#generating-a-post-css-configuration-file)
└── tailwind.config.js — Main configuration file for Tailwind CSS [Read more about it here](https://tailwindcss.com/docs/configuration)
- Main JavaScript File
- Index File
- Folder with images and icons
- Folder with data
Also, each component may include another component that follows all above listed rules.
component
├── nested-component
│ ├── data
│ │ └── nested-component-lottie-data.json
│ ├── images
│ │ ├── nested-component-image.jpg
│ │ ├── nested-component-inline-svg.inline.svg
│ │ └── nested-component-url-svg.url.svg
│ ├── nested-component.js
│ └── index.js
├── data
│ └── component-lottie-data.json
├── images
│ ├── component-image.jpg
│ ├── component-inline-svg.inline.svg
│ └── component-url-svg.url.svg
├── component.js
└── index.jsESLint helps find and fix code style issues and force developers to follow same rules. Current configuration is based on Airbnb style guide.
Additional commands:
npm run lintRun it to check the current status of eslint issues across project.
npm run lint:fixRun it to fix all possible issues.
Prettier helps to format code based on defined rules. Difference between Prettier and ESLint.
Additional commands:
npm run formatRun it to format all files across the project.
Following extensions required to simplify the process of keeping the same code style across the project:
After installation enable "ESLint on save" by adding to your VS Code settings.json the following line:
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}You can navigate to settings.json by using Command Pallete (CMD+Shift+P) and then type "Open settings.json".
To enable Prettier go to Preferences -> Settings -> type "Format". Then check that you have esbenp.prettier-vscode as default formatter, and also enable "Format On Save".
Reload VS Code and auto-format will work for you.
Documentation for docs is described in content/docs/README.md