mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
Example: with absolute imports (#2863)
* Add with-absolute-imports example * Fix examples repo urls to point to master instead of v3-beta
This commit is contained in:
parent
a142848ef5
commit
fd198d28a8
14
examples/with-absolute-imports/.babelrc
Normal file
14
examples/with-absolute-imports/.babelrc
Normal file
|
@ -0,0 +1,14 @@
|
||||||
|
{
|
||||||
|
"presets": "next/babel",
|
||||||
|
"plugins": [
|
||||||
|
[
|
||||||
|
"module-resolver",
|
||||||
|
{
|
||||||
|
"root": ["./"],
|
||||||
|
"alias": {
|
||||||
|
"components": "./components"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
]
|
||||||
|
}
|
27
examples/with-absolute-imports/README.md
Normal file
27
examples/with-absolute-imports/README.md
Normal file
|
@ -0,0 +1,27 @@
|
||||||
|
# Example app with absolute imports
|
||||||
|
|
||||||
|
## How to use
|
||||||
|
|
||||||
|
Download the example [or clone the repo](https://github.com/zeit/next.js):
|
||||||
|
|
||||||
|
```bash
|
||||||
|
curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-absolute-import
|
||||||
|
cd with-absolute-import
|
||||||
|
```
|
||||||
|
|
||||||
|
Install it and run:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm install
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))
|
||||||
|
|
||||||
|
```bash
|
||||||
|
now
|
||||||
|
```
|
||||||
|
|
||||||
|
## The idea behind the example
|
||||||
|
|
||||||
|
This example shows how to configure Babel to have absolute imports instead of relative imports without modifying the Webpack configuration.
|
5
examples/with-absolute-imports/components/header.js
Normal file
5
examples/with-absolute-imports/components/header.js
Normal file
|
@ -0,0 +1,5 @@
|
||||||
|
export default () => (
|
||||||
|
<header>
|
||||||
|
<h1>Hello world!</h1>
|
||||||
|
</header>
|
||||||
|
)
|
13
examples/with-absolute-imports/package.json
Normal file
13
examples/with-absolute-imports/package.json
Normal file
|
@ -0,0 +1,13 @@
|
||||||
|
{
|
||||||
|
"scripts": {
|
||||||
|
"dev": "next",
|
||||||
|
"build": "next build",
|
||||||
|
"start": "next start"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"babel-plugin-module-resolver": "^2.7.1",
|
||||||
|
"next": "^3.0.6",
|
||||||
|
"react": "^15.6.1",
|
||||||
|
"react-dom": "^15.6.1"
|
||||||
|
}
|
||||||
|
}
|
7
examples/with-absolute-imports/pages/index.js
Normal file
7
examples/with-absolute-imports/pages/index.js
Normal file
|
@ -0,0 +1,7 @@
|
||||||
|
import Header from 'components/header.js'
|
||||||
|
|
||||||
|
export default () => (
|
||||||
|
<div>
|
||||||
|
<Header />
|
||||||
|
</div>
|
||||||
|
)
|
|
@ -10,7 +10,7 @@ https://next-with-apollo-auth.now.sh
|
||||||
Download the example [or clone the repo](https://github.com/zeit/next.js):
|
Download the example [or clone the repo](https://github.com/zeit/next.js):
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
curl https://codeload.github.com/zeit/next.js/tar.gz/v3-beta | tar -xz --strip=2 next.js-3-beta/examples/with-apollo-auth
|
curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-apollo-auth
|
||||||
cd with-apollo-auth
|
cd with-apollo-auth
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -32,13 +32,13 @@ now
|
||||||
This is an extention of the _[with Apollo](https://github.com/zeit/next.js/tree/master/examples/with-apollo#the-idea-behind-the-example)_ example:
|
This is an extention of the _[with Apollo](https://github.com/zeit/next.js/tree/master/examples/with-apollo#the-idea-behind-the-example)_ example:
|
||||||
|
|
||||||
> [Apollo](http://dev.apollodata.com) is a GraphQL client that allows you to easily query the exact data you need from a GraphQL server. In addition to fetching and mutating data, Apollo analyzes your queries and their results to construct a client-side cache of your data, which is kept up to date as further queries and mutations are run, fetching more results from the server.
|
> [Apollo](http://dev.apollodata.com) is a GraphQL client that allows you to easily query the exact data you need from a GraphQL server. In addition to fetching and mutating data, Apollo analyzes your queries and their results to construct a client-side cache of your data, which is kept up to date as further queries and mutations are run, fetching more results from the server.
|
||||||
>
|
>
|
||||||
> In this simple example, we integrate Apollo seamlessly with Next by wrapping our *pages* inside a [higher-order component (HOC)](https://facebook.github.io/react/docs/higher-order-components.html). Using the HOC pattern we're able to pass down a central store of query result data created by Apollo into our React component hierarchy defined inside each page of our Next application.
|
> In this simple example, we integrate Apollo seamlessly with Next by wrapping our *pages* inside a [higher-order component (HOC)](https://facebook.github.io/react/docs/higher-order-components.html). Using the HOC pattern we're able to pass down a central store of query result data created by Apollo into our React component hierarchy defined inside each page of our Next application.
|
||||||
>
|
>
|
||||||
> On initial page load, while on the server and inside `getInitialProps`, we invoke the Apollo method, [`getDataFromTree`](http://dev.apollodata.com/react/server-side-rendering.html#getDataFromTree). This method returns a promise; at the point in which the promise resolves, our Apollo Client store is completely initialized.
|
> On initial page load, while on the server and inside `getInitialProps`, we invoke the Apollo method, [`getDataFromTree`](http://dev.apollodata.com/react/server-side-rendering.html#getDataFromTree). This method returns a promise; at the point in which the promise resolves, our Apollo Client store is completely initialized.
|
||||||
>
|
>
|
||||||
> This example relies on [graph.cool](https://www.graph.cool) for its GraphQL backend.
|
> This example relies on [graph.cool](https://www.graph.cool) for its GraphQL backend.
|
||||||
>
|
>
|
||||||
> *Note: Apollo uses Redux internally; if you're interested in integrating the client with your existing Redux store check out the [`with-apollo-and-redux`](https://github.com/zeit/next.js/tree/master/examples/with-apollo-and-redux) example.*
|
> *Note: Apollo uses Redux internally; if you're interested in integrating the client with your existing Redux store check out the [`with-apollo-and-redux`](https://github.com/zeit/next.js/tree/master/examples/with-apollo-and-redux) example.*
|
||||||
|
|
||||||
[graph.cool](https://www.graph.cool) can be setup with many different
|
[graph.cool](https://www.graph.cool) can be setup with many different
|
||||||
|
|
|
@ -5,7 +5,7 @@
|
||||||
Download the example [or clone the repo](https://github.com/zeit/next.js):
|
Download the example [or clone the repo](https://github.com/zeit/next.js):
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
curl https://codeload.github.com/zeit/next.js/tar.gz/v3-beta | tar -xz --strip=2 next.js-3-beta/examples/with-dynamic-import
|
curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-dynamic-import
|
||||||
cd with-dynamic-import
|
cd with-dynamic-import
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue