175 lines
5.3 KiB
Markdown
175 lines
5.3 KiB
Markdown
This project was bootstrapped with [Create Next App](https://github.com/zeit/next.js).
|
|
|
|
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.
|
|
|
|
## 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?
|
|
|
|
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.
|
|
|
|
## Folder Structure
|
|
|
|
After creating an app, it should look something like:
|
|
|
|
```
|
|
.
|
|
├── README.md
|
|
├── components
|
|
│ ├── head.js
|
|
│ └── nav.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:
|
|
|
|
- Automatic compilation and bundling (with Babel and webpack)
|
|
- Hot code reloading
|
|
- Server rendering and indexing of `./pages/`
|
|
- 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
|
|
|
|
[`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.
|
|
|
|
```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
|
|
|
|
We recommend keeping React components in `./components/` and they should look like:
|
|
|
|
### `./components/hello.js`
|
|
|
|
```jsx
|
|
import { useState } from 'react'
|
|
|
|
export function Hello() {
|
|
const [text, setText] = useState('World')
|
|
return <div>Hello {text}</div>
|
|
}
|
|
```
|
|
|
|
## Fetching Data
|
|
|
|
You can fetch data in `./pages/` components using `getInitialProps` like this:
|
|
|
|
### `./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
|
|
```
|
|
|
|
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.
|
|
|
|
_Note: `getInitialProps` can **not** be used in children components. Only in `./pages/`._
|
|
|
|
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.
|
|
|
|
1. Install the `now` command-line tool either via npm `npm install -g now` or Yarn `yarn global add now`.
|
|
|
|
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?
|
|
|
|
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)
|