2019-07-18 05:23:06 +02:00
This project was bootstrapped with [Create Next App ](https://github.com/zeit/next.js ).
2019-07-17 22:53:56 +02:00
2019-07-18 05:23:06 +02:00
Find the most recent version of this guide at [here ](https://github.com/zeit/next.js/blob/master/lib/templates/default/README.md ). And check out [Next.js repo ](https://github.com/zeit/next.js ) for the most up-to-date info.
2019-07-17 22:53:56 +02:00
## Table of Contents
- [Questions? Feedback? ](#questions-feedback )
- [Folder Structure ](#folder-structure )
- [Available Scripts ](#available-scripts )
- [npm run dev ](#npm-run-dev )
- [npm run build ](#npm-run-build )
- [npm run start ](#npm-run-start )
- [Using CSS ](#using-css )
- [Adding Components ](#adding-components )
- [Fetching Data ](#fetching-data )
- [Syntax Highlighting ](#syntax-highlighting )
- [Using the `static` Folder ](#using-the-static-folder )
- [Deploy to Now ](#deploy-to-now )
- [Something Missing? ](#something-missing )
## Questions? Feedback?
2019-07-18 05:23:06 +02:00
Check out [Next.js FAQ & docs ](https://github.com/zeit/next.js#faq ) or [let us know ](https://github.com/zeit/next.js/issues ) your feedback.
2019-07-17 22:53:56 +02:00
## Folder Structure
After creating an app, it should look something like:
```
.
├── README.md
├── components
│ ├── head.js
│ └── nav.js
├── next.config.js
├── node_modules
│ ├── [...]
├── package.json
├── pages
│ └── index.js
├── static
│ └── favicon.ico
└── yarn.lock
```
Routing in Next.js is based on the file system, so `./pages/index.js` maps to the `/` route and
`./pages/about.js` would map to `/about` .
The `./static` directory maps to `/static` in the `next` server, so you can put all your
other static resources like images or compiled CSS in there.
Out of the box, we get:
2019-07-19 21:55:30 +02:00
- Automatic compilation and bundling (with Babel and webpack)
2019-07-17 22:53:56 +02:00
- Hot code reloading
2019-07-19 21:55:30 +02:00
- Server rendering and indexing of `./pages/`
2019-07-17 22:53:56 +02:00
- Static file serving. `./static/` is mapped to `/static/`
Read more about [Next's Routing ](https://github.com/zeit/next.js#routing )
## Available Scripts
In the project directory, you can run:
### `npm run dev`
Runs the app in the development mode.< br >
Open [http://localhost:3000 ](http://localhost:3000 ) to view it in the browser.
The page will reload if you make edits.< br >
You will also see any errors in the console.
### `npm run build`
Builds the app for production to the `.next` folder.< br >
It correctly bundles React in production mode and optimizes the build for the best performance.
### `npm run start`
Starts the application in production mode.
The application should be compiled with \`next build\` first.
See the section in Next docs about [deployment ](https://github.com/zeit/next.js/wiki/Deployment ) for more information.
## Using CSS
2019-07-19 21:55:30 +02:00
[`styled-jsx` ](https://github.com/zeit/styled-jsx ) is bundled with next to provide support for isolated scoped CSS.
The aim is to support "shadow CSS" resembling of Web Components.
2019-07-17 22:53:56 +02:00
```jsx
export default () => (
< div >
Hello world
< p > scoped!< / p >
< style jsx > { `
p {
color: blue;
}
div {
background: red;
}
@media (max-width: 600px) {
div {
background: blue;
}
}
`}< / style >
< / div >
)
```
Read more about [Next's CSS features ](https://github.com/zeit/next.js#css ).
## Adding Components
2019-07-19 21:55:30 +02:00
We recommend keeping React components in `./components/` and they should look like:
2019-07-17 22:53:56 +02:00
2019-07-19 21:55:30 +02:00
### `./components/hello.js`
2019-07-17 22:53:56 +02:00
```jsx
2019-07-19 21:55:30 +02:00
import { useState } from 'react'
2019-07-17 22:53:56 +02:00
2019-07-19 21:55:30 +02:00
export function Hello() {
const [text, setText] = useState('World')
return < div > Hello {text}< / div >
2019-07-17 22:53:56 +02:00
}
```
## Fetching Data
2019-07-19 21:55:30 +02:00
You can fetch data in `./pages/` components using `getInitialProps` like this:
2019-07-17 22:53:56 +02:00
### `./pages/stars.js`
```jsx
const Page = props => < div > Next stars: {props.stars}< / div >
Page.getInitialProps = async ({ req }) => {
const res = await fetch('https://api.github.com/repos/zeit/next.js')
const json = await res.json()
const stars = json.stargazers_count
return { stars }
}
export default Page
```
2019-07-19 21:55:30 +02:00
For the initial page load, `getInitialProps` will execute on the server only. `getInitialProps` will only be executed on the client when navigating to a different route via the `<Link>` component or using the routing APIs.
2019-07-17 22:53:56 +02:00
2019-07-19 21:55:30 +02:00
_Note: `getInitialProps` can **not** be used in children components. Only in `./pages/` ._
2019-07-17 22:53:56 +02:00
Read more about [fetching data and the component lifecycle ](https://github.com/zeit/next.js#fetching-data-and-component-lifecycle )
## Syntax Highlighting
To configure the syntax highlighting in your favorite text editor, head to the [relevant Babel documentation page ](https://babeljs.io/docs/editors ) and follow the instructions. Some of the most popular editors are covered.
## Deploy to Now
[now ](https://zeit.co/now ) offers a zero-configuration single-command deployment.
2019-07-19 21:55:30 +02:00
1. Install the `now` command-line tool either via npm `npm install -g now` or Yarn `yarn global add now` .
2019-07-17 22:53:56 +02:00
2. Run `now` from your project directory. You will see a **now.sh** URL in your output like this:
```
> Ready! https://your-project-dirname-tpspyhtdtk.now.sh (copied to clipboard)
```
Paste that URL into your browser when the build is complete, and you will see your deployed app.
You can find more details about [`now` here ](https://zeit.co/now ).
## Something Missing?
2019-07-18 05:23:06 +02:00
If you have ideas for how we could improve this readme or the project in general, [let us know ](https://github.com/zeit/next.js/issues ) or [contribute some! ](https://github.com/zeit/next.js/edit/master/lib/templates/default/README.md )