1640851356
Como O Roteamento De Arquivo Em Next.js Funciona Para iniciantes
Há muitos benefícios em usar o Next.js, mas um recurso muito útil é o sistema de roteamento de arquivos. Essa arquitetura simplificou significativamente o processo de criação de rotas em um site. Neste tutorial, aprenderemos como configurar um projeto Next.js e como funciona o sistema de roteamento de arquivos em Next.js.
Também aprenderemos como:
- criar páginas estáticas e dinâmicas
- implementar transição de página com
Link, bem como alguns de seus adereços - use o
useRouter()gancho para obter o parâmetro de consulta do URL - aninhar rotas dinamicamente
… e muito mais.
Aprenderemos tudo isso criando uma página de portfólio.
Recursos do Next.js
Next.js é uma estrutura da web baseada em React construída em Node.js. Por ser baseado no React, também segue o projeto de arquitetura do componente.
Next.js pode ser usado para construir sites estáticos . Esses são sites com páginas que são pré-renderizadas e veiculadas ao usuário no momento da construção. Em termos simples, a página está disponível antes mesmo que o usuário a solicite.
Ele também permite o uso de renderização do lado do servidor para gerar páginas da web dinâmicas (páginas que mudam toda vez que um usuário faz uma nova solicitação).
A arquitetura de roteamento em Next.js torna muito fácil criar e vincular páginas. Podemos passar parâmetros de consulta dinamicamente e criar páginas dinâmicas sem ter que sair da pagespasta.
Por que usar Next.js
O framework Next.js foi lançado em 25 de outubro de 2016. Desde então, ele se tornou um dos frameworks da web mais populares, por alguns motivos.
Por um lado, Next.js é fundamentalmente React. Esta é uma ótima notícia para a enorme comunidade de desenvolvedores com experiência no React. Os desenvolvedores ainda podem fazer uso de alguns recursos do React, como a arquitetura do componente, JSX e muito mais.
Em segundo lugar, está a capacidade de pré-renderizar as páginas usando o Next. Por padrão, Next.js gera todas as páginas com antecedência, que serão reutilizadas a cada solicitação do usuário. Como o site é pré-gerado, os rastreadores do mecanismo de pesquisa podem indexar o site corretamente para SEO.
Como disse, um recurso muito útil é o sistema de roteamento de arquivos em Next.js, que simplificou significativamente o processo de criação de rotas dentro de um site. Então você pode basicamente criar um monte de .jsarquivos dentro de uma única pasta chamada pages, que Next.js usará para todas as suas rotas. Não é apenas útil, mas também muito poderoso.
O projeto
O site terá duas rotas simples e duas rotas dinâmicas (veremos o significado delas mais tarde).
A Projectspágina irá renderizar uma lista de projetos. Ao clicar em ver mais , seremos direcionados para uma única página do projeto.
A blogpágina renderizará uma lista de postagens do blog, e também podemos visualizar uma única página do blog clicando em Leia mais . A página conterá detalhes sobre uma postagem específica.
Para demonstrar o aninhamento de rota em Next, também criaremos uma /commentsrota aninhada para cada postagem do blog. Por exemplo, podemos ver os comentários da primeira postagem visitando localhost:3000/blog/first-post/comments.
Esta é a prévia ao vivo do projeto:
Você pode obter o código de seu repositório GitHub , executá-lo em sua máquina e ajustá-lo como desejar. Você pode excluir minhas imagens e mover as suas para a /publicpasta. Você só precisa alterar os nomes dos arquivos na marcação.
Começando
Para começar a usar o Next, você precisa ter o Node.js instalado no seu computador. A versão do Node não deve ser inferior a 12.x. Você pode verificar a versão digitando node -vno terminal de comando.
Se você não tem o Node.js instalado ou tem uma versão mais antiga, pode baixar a versão mais recente aqui .
Depois de fazer o download, precisaremos inicializar nosso projeto. Podemos fazer isso automática ou manualmente. Neste tutorial, usaremos o create-next-appgerador de código para construir automaticamente uma estrutura de trabalho para nós.
Navegue até a pasta em que deseja que o projeto resida e digite o seguinte comando:
cd your/path
npx create-next-app next-portfolioFinalmente, execute o seguinte comando:
npm run devVocê deverá ver o seguinte na janela do seu terminal, se tudo tiver corrido bem.
Podemos visualizar a página no navegador da web em http: // localhost: 3000 .
A arquitetura baseada em arquivo de roteamento em Next.js
Quando executamos esse comando, criamos uma pasta chamada next-portfoliodentro do diretório atual. Dentro next-portfolio, você encontrará algumas pastas e arquivos importantes.
A pasta na qual trabalharemos com mais frequência é pages. Em Next, cada .jsarquivo definido dentro dos pagesmapas para uma rota com nome semelhante:
pages/about.jsirá mapear para/aboutpages/contact.jsirá mapear para/contactpages/blog.jsirá mapear para/blog
Aqui está uma representação de alto nível da pasta de páginas dentro de um projeto Next típico:
my-site
└── pages
└── api // API routes
├── _app.js // custom route (will **not** be used as a route)
├── index.js // index route (will be rendered at my-site.com)
├── about.js // predefined route (will be rendered at my-site.com/about)
├── contact.js // predefined route (will be rendered at my-site.com/contact)
└── blog
├── index.js // index route for blog (will be rendered at my-site.com/blog)
├── author.js // predefined route (will be rendered at my-site.com/blog/author)
├── [blog-id].js // handles dynamic route (will render dynamcially, based on the url parameter)
└── [...slug].js // handles catch all route (will be rendered at all routes following my-site.com/blog)Cada componente React será empacotado como um .jsarquivo, contendo marcação e lógica para cada página.
A pasta pública
Next.js fornece uma pasta pública onde você pode armazenar ativos estáticos como imagens, scripts personalizados e fontes, e consultá-los a partir de seus componentes / código.
Estaremos usando as seguintes imagens em várias páginas em nosso site de portfólio:
- Uma foto pessoal. Isso será usado na página inicial (
index.js). - Quatro ícones de mídia social. Isso será usado na página de contato (
contact.js).
Páginas personalizadas
Você deve ter notado a página _app.jsem sua pasta de páginas. Esta página é uma página personalizada. As páginas personalizadas não são usadas como rotas pelo Next.js e são prefixadas com um sublinhado ( _).
Next.js usa o _app.jspara inicializar a página da web. Este componente inicializa o aplicativo e transmite o pagePropsprop, que são os dados necessários para todos os componentes aninhados em nosso site.
Sendo o componente raiz, podemos definir um layout que desejamos manter em todas as páginas.
Também podemos usar uma folha de estilo global que se aplica a todos os elementos, como no exemplo a seguir:
//next-portfolio/pages/_app.js
import Layout from '../components/Layout'
import '../styles/globals.css'
function MyApp({ Component, pageProps }) {
return (
<Layout>
<Component {...pageProps} />
</Layout>
);
}
export default MyAppRotas de índice
Sempre que navegar para rotas de índice (aka home pages), tais como my-site.com, my-site.com/blogou my-site.com/projects, Next.js vai ler todos os arquivos de dentro desse diretório chamado index.js.
Portanto, em essência, pages/index.jsretorna a marcação para a página inicial, que é exibida em localhost:3000. pages/blog/index.jsretorna a marcação para a página inicial do blog, que está em localhost:3000/blog.
Em seu editor de código, vá para a página de índice e exclua todo o conteúdo do arquivo. A seguinte marcação é usada para fins de teste:
// next-portfolio/pages/index.js
import Image from 'next/image'
import Link from 'next/link'
export default function Home() {
return (
<div className="container">
<h1>Hello World</h1>
</div>
)
}Nota: vá para o next-portfolio/stylesseu editor de texto e exclua Home.module.css, pois não precisaremos mais dele.
Agora salve as alterações do arquivo e abra http: // localhost: 3000 . As mudanças no arquivo de índice refletirão na rota do índice.
Muito mais irá para o index.jsarquivo. A seção superior da página inicial conterá links de navegação. No entanto, é mais intuitivo construir outras páginas antes da página inicial, para que possamos criar um link para elas de forma adequada.
Por esse motivo, precisaremos primeiro criar algumas das outras páginas antes de construir nossa home page.
Rotas estáticas
Primeiro, estaremos criando duas rotas estáticas para nosso site de portfólio. Essas rotas renderizam dados estáticos : elas não usam o parâmetro de consulta do URL para renderizar dados.
As duas rotas estáticas que criaremos são about.jse contact.js. Esses arquivos serão para as rotas /aboute /contactrespectivamente.
Para fazer isso, navegue next-portfolio/pagese crie um novo arquivo chamado about.js. A marcação para a página Sobre irá dentro dela:
// next-portfolio/pages/About.js
export default function About() {
return (
<div className="container">
<h1> About me </h1>
<p> My name is Kingsley Ubah. I'm a 22-year-old web developer from Nigeria. I'm particularly interested in technical writing. When I'm not coding or writing, I read my favorite books and play some cool video games. I'm a huge fan of good movies and football. Also, don't play with my food!</p>
<p>I'm skilled in front-end web development. I'm equally good at the back end. Technologies I work well with include React, Node.js, Vue, Next, Gatsby, OAuth, MongoDB, MySQL and many others. </p>
<p>I could keep going on and on about my life but I can guarantee that you'll be bored in the end. So I'll just end it right here.</p>
</div>
)
}Observação: é claro, você pode personalizar o conteúdo de acordo com seu conjunto de habilidades, se desejar!
Agora, salve as alterações do arquivo, vá até next-portfolio/styles/globals.csse digite os seguintes estilos:
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap');
html,
body {
padding: 0;
margin: 0;
font-family: "lato", sans-serif;
font-size: 20px;
background-color: #D7E5f0;
}
* {
box-sizing: border-box;
}
h1 {
font-size: 60px;
}
.logo {
font-weight: 600;
font-size: 30px;
}
p {
font-size: 20px;
font-weight: 600;
line-height: 1.2;
}
a {
text-decoration: none;
color: black;
}
.container {
margin: 0 auto;
max-width: 1200px;
}Observação: mais uma vez, vá para a cidade se quiser um conjunto diferente de estilos.
Salve as alterações. Em seu navegador da web, navegue para http: // localhost: 3000 / about .
Finalmente, para páginas estáticas, crie um contact.jsarquivo dentro de pagese crie o Contactcomponente, assim:
// next-portfolio/pages/Contact.js
import Image from 'next/image'
export default function Contact() {
return (
<div className="container">
<h1> Contact me </h1>
<p> I'd love to hear from you. Want to reach out, you can contact me on the
following profiles</p>
<ul className="contact">
<div className="link">
<li>
<Image src='/facebook.png' height={20} width={20} />
<a href='https://facebook.com/UbahTheBuilder'> Like me on Facebook</a>
</li>
</div>
<div className="link">
<li>
<Image src='/twitter.png' height={20} width={20} />
<a href='https://twitter.com/UbahTheBuilder'> Follow me on Twitter</a>
</li>
</div>
<div className="link">
<li>
<Image src='/linkedin.png' height={20} width={20} />
<a href='https://linkedin.com/UbahTheBuilder'> Connect with me on LinkedIn</a>
</li>
</div>
<div className="link">
<li>
<Image src='/whatsapp.png' height={20} width={20} />
<a href='https://whatsapp.com/UbahTheBuilder'> Chat with me on Whatsapp</a>
</li>
</div>
</ul>
<form>
<input type="text" placeholder="your name" />
<br />
<input type="email" placeholder="your email address" />
<br />
<input type="text" placeholder="subject" />
<br />
<textarea id="message" rows="15" cols="65" placeholder="your message"></textarea>
<br />
<input type="submit" value="Reach out" />
</form>
</div>
)
}A partir deste componente, retornamos uma página contendo os links de mídia social, bem como um formulário de contato.
Para os links, você notará que importamos e usamos o Imagecomponente fornecido por next / image .
O Imagecomponente ajuda a criar imagens melhor otimizadas e responsivas que se adaptam ao tamanho da janela do navegador.
Para estilizá-lo melhor, fique à vontade para copiar os seguintes estilos e colá-los na folha de estilo global:
/* next-portfolio/styles/globals.css */
/* CONTACT PAGE */
.link {
width: 500px;
display: flex;
justify-content: space-between;
align-items: center;
margin: 5px 0;
font-size: 17px;
}
input {
height: 50px;
width: 500px;
margin: 10px 0;
font-size: 17px;
padding-left: 3px;
}
input[type=submit] {
background-color: blue;
color: white;
border: none;
}Salve as alterações do arquivo e navegue para http: // localhost: 3000 / contact .
Transições de rota do lado do cliente
Criar páginas é um processo. O usuário também deve ser capaz de navegar entre essas páginas. Com duas das quatro páginas já implementadas, vamos agora terminar a página inicial. Primeiro, vamos ao arquivo de índice e modificamos o Homecomponente, assim:
// pages/index.js`
import Image from 'next/image'
import Link from 'next/link'
export default function Home() {
return (
<div className="container">
<div className="navbar">
<div className="logo">Pragmatic Developer</div>
<ul>
<li>
<Link href="/about">
<a>About me</a>
</Link>
</li>
<li>
<Link href="/contact">
<a>Contact me</a>
</Link>
</li>
<li>
<Link href="/blog">
<a>Blog</a>
</Link>
</li>
<li>
<Link href="/projects">
<a>Projects</a>
</Link>
</li>
</ul>
</div>
<div className="profile">
<Image src="/me.png" height={200} width={200} alt="My profile image" />
<div className="intro">
<h1>Hi, I'm Kingsley</h1>
<p>I am a web developer and technical writer</p>
</div>
</div>
</div>
)
}Se você já implementou o roteamento do lado do cliente em um aplicativo React, pode estar familiarizado com o Linkcomponente React do Roteador React .
Next.js também nos fornece um componente semelhante, que importamos de next / link .
O <Link>componente é usado para implementar transições de página em um Next app. O maior recurso desse componente é que ele permite que você passe parâmetros de consulta para o useRouter, que é o que você usa para renderizar conteúdo em rotas dinâmicas.
Dentro da marcação JSX, registramos o componente e passamos hrefatributos válidos especificando as páginas que desejamos vincular no menu de navegação.
O componente também pode ter algumas propriedades, algumas das quais são mostradas nas seções a seguir.
as
Às vezes, você pode querer usar um URL personalizado, provavelmente para torná-lo mais legível e semântico.
Para isso, você pode repassar a aspropriedade para Link, assim:
<ul>
<li>
<Link href="/about" as="/king">
<a>About me</a>
</Link>
</li>
<li>
<Link href="/contact">
<a>Contact me</a>
</Link>
</li>
<li>
<Link href="/blog">
<a>Blog</a>
</Link>
</li>
<li>
<Link href="/projects">
<a>Projects</a>
</Link>
</li>
</ul>
preFetch
Eu mencionei que Next.js como uma estrutura nos permite pré-renderizar páginas. Essa propriedade nos permite buscar previamente os recursos necessários para renderizar a página Sobre em segundo plano:
<Link href="/about" prefetch>
<a>About me</a>
</Link>Agora salve o arquivo. Sinta-se à vontade para usar os seguintes estilos em sua folha de estilo global:
/* next-portfolio/styles/globals.css */
/* HOME PAGE */
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar ul {
display: flex;
}
.profile {
display: flex;
max-width: 900px;
margin: 180px auto;
}
li {
list-style-type: none;
}
.navbar a {
text-decoration: none;
color: rgb(59, 58, 58);
margin: 0 25px;
transition: 0.2s;
}
.navbar a:hover {
background-color: blue;
color: white;
padding: 8px 8px;
border-radius: 6px;
}
.intro {
margin: 0 90px;
}
.contact a {
margin: 0 15px;
}Salve os estilos no arquivo e navegue até http: // localhost: 3000 em seu navegador.
Ao clicar em Contato no menu de navegação, você observará que agora podemos passar da página inicial para a página de contato.
Rotas Dinâmicas
Em Next.js, as rotas dinâmicas são rotas especiais que renderizam conteúdo dinamicamente, dependendo da consulta iddo URL.
As rotas dinâmicas são tratadas por arquivos especiais, definidos com a [param].jsconvenção. paramé obtido a partir do objeto de consulta.
Portanto, em vez de definir arquivos diferentes para rotas diferentes, como em:
blog/first-post.jspor/blog/first-postblog/second-post.jspor/blog/second-postblog/third-post.jspor/blog/third-post
… Podemos definir uma única página dinâmica para lidar com qualquer rota dinâmica em /blog:
- blog / [blog-id] .js
Sempre que qualquer um dos URLs acima for acessado, como no seguinte:
<li><Link href="/blog/1"><a>Visit my first post</a></Link></li>
// 1 is the blog-id which will get sent to the dynamic component … Dentro do componente dinâmico, podemos acessar o ID da consulta (ou seja, 1, 2, 3 first-poste assim por diante) a partir da URL.
Fazemos isso importando e chamando o gancho useRouter () . Em seguida, desconstruímos o paramvalor do routerobjeto e decidimos o que renderizar com base nisso.
Portanto, se você navegar blog/1de uma página inicial, o :idde 1 pode ser obtido da seguinte forma:
import {useRouter} from 'next/router'
export default function Blog() {
const router = useRouter();
const {id} = router.query;
return (
<div className="container">
<h1> You are now reading article {id} </h1> // You are now reading article 1
</div>
)
}Você também pode usar strings de consulta em vez de caminhos de URL completos:
<li><Link href="/blog?title=my-first-post"><a>Visit my first post</a></Link></li>Observação: normalmente, você consulta um banco de dados usando o ID da consulta e, a seguir, recupera um registro de dados correspondente que será exibido na página dinâmica. Neste tutorial, usarei dados JSON simulados para manter tudo mais simples.
Criando a página Projetos
A primeira página dinâmica será para projetos.
Dentro pages, crie uma nova pasta chamada projects. Em seguida, na nova pasta, crie um arquivo chamado index.js.
Este arquivo retornará o que é exibido quando visualizamos http: // localhost: 3000 / projects em um navegador da web. Em outras palavras, essa será a página inicial do /projects.
Também precisamos de alguns dados JSON fictícios para projetos. Dentro pages, crie um arquivo chamado projects.json. Em seguida, crie uma matriz de seus próprios projetos, assim:
// next-portfolio/pages/projects.json
[
{
"id": 1,
"cover": "https://uploads.sitepoint.com/wp-content/uploads/2021/10/1633599028SkilllzLanding.png",
"title": "Skilllz",
"slug": "projects/first-project",
"excerpt": "A Sleek Purple Landing Page For an online training platform. Learn some important CSS concepts by building a landing page"
},
{
"id": 2,
"title": "Movie Generator App",
"cover": "https://uploads.sitepoint.com/wp-content/uploads/2021/10/1633599458moviegenerator.png",
"slug": "projects/second-project",
"excerpt": "Learn how to build CRUD applications with React and HarperDB. This in depth tutorials covers a lot about API integartion"
},
{
"id": 3,
"title": "Hacker News Clone",
"cover": "https://uploads.sitepoint.com/wp-content/uploads/2021/10/1633599423hackernewsclone.png",
"slug": "projects/third-project",
"excerpt": "Have you always wanted to clone a web page? Build a Hacker News Clone using React and HarperDB. Get started with it now"
}
]O JSON contém os dados dos projetos que desejamos exibir em http: // localhost: 3000 / projects .
Depois disso, vamos trazer esses dados para a marcação, assim:
// next-portfolio/pages/projects/index.js
import Portfolios from '../projects.json'
import Link from 'next/link'
export default function Projects() {
return (
<div className="container">
<h1> My Projects </h1>
<div className="projects">
{Portfolios.map(portfolio => {
return(
<div className="project" key={portfolio.id}>
<img src={portfolio.cover} alt="project image" />
<h2>{portfolio.title}</h2>
<p>{portfolio.excerpt}</p>
<Link href={portfolio.slug}><a>View More</a></Link>
</div>
)}
)}
</div>
</div>
)
}A primeira coisa que fizemos foi importar os dados. Em seguida, mapeamos cada projeto no modelo JSX usando a map()função JavaScript .
Também precisamos torná-lo mais apresentável, então fique à vontade para usar os seguintes estilos:
// next-portfolio/styles/globals.css
/* PROJECTS */
.projects {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.project img {
height: 100px;
width: 200px;
}
.project a {
color: white;
background-color: black;
padding: 10px 10px;
border-radius: 6px;
}
.project {
max-width: 500px;
background-color: blue;
border-radius: 6px;
color: white;
padding: 30px 30px;
margin: 30px 0;
}Para visualizar a página no navegador, navegue até http: // localhost: 3000 / projects .
Página única do projeto
Agora, precisamos implementar a rota dinâmica para exibir um único projeto. Portanto, se navegarmos para http: // localhost: 3000 / projects / 1 , o primeiro projeto será exibido.
Dentro da pasta de projetos em pages, crie um novo arquivo chamado [project].js.
Este arquivo irá processar a página dinâmica um para o projeto único, como em projects/1, projects/2e assim por diante.
Dentro do arquivo, definimos o modelo que será usado para uma única página do projeto, assim:
// next-portfolio/pages/projects/[project].js
import {useRouter} from 'next/router'
export default function Project() {
const router = useRouter();
const {project} = router.query;
return (
<div className="container">
<div>
<h1>This is the {project}</h1>
<p>Lorem Ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem Ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem Ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
)
}Nota: do objeto do roteador, pegamos o ID da consulta do objeto de consulta. Normalmente, você usaria essa chave para fazer uma consulta de API para um registro correspondente. Dessa forma, você também pode exibir uma mensagem de erro para os casos em que um projeto correspondente não foi encontrado no banco de dados.
Como não temos uma API para consultar um projeto, exibimos o slug da URL junto com algum texto lorem ipsum estático . O slug identifica qual página é renderizada.
A imagem a seguir mostra como a página pode ser alterada com base no URL.
Rotas de aninhamento
Vamos considerar um blog, por exemplo. Quando o usuário navega para my-site.com/blog, uma lista de postagens de blog é exibida.
Quando o usuário navega para my-site/blog/first-post, a primeira postagem do blog é exibida. E quando eles navegarem para my-site/blog/first-post/comments, estarão todos os comentários relacionados à primeira postagem. Isso é chamado de aninhamento de rota .
Em Next.js, você também pode aninhar rotas dinâmicas. Cada rota secundária pode acessar a consulta :iddo pai. Dessa forma, my-site.com/blog/first-post/commentsserá diferente de, digamos, my-site.com/blog/second-post/commentsporque você pode verificar a postagem a :idpartir da URL ou objeto de consulta, usando useRouter().
Na verdade, estaremos fazendo algo semelhante com nossa página de blog. Cada postagem do blog terá seu próprio conjunto de comentários. Em outras palavras, aninharemos uma página dinâmica nomeada [comments].jsdentro de outra página dinâmica, nomeada [blog].js.
Criação da página inicial do blog
Antes de entrar no aninhamento de rotas, criaremos a página inicial do blog primeiro.
Para fazer isso, faça o cd next-portfolio/pagese crie uma pasta chamada blog. Dentro da nova pasta, crie um arquivo chamado index.js.
Este arquivo retornará o que é exibido em http: // localhost: 3000 / blog . Em outras palavras, é a página inicial dessa rota.
A seguir, criamos dados para postagens de blog:
// next-portfolio/pages/posts.json
[
{
"id": 1,
"cover": "https://uploads.sitepoint.com/wp-content/uploads/2021/10/1633515082detectcanva.png",
"title": "How to detect the operating system in React and Render accordingly",
"slug": "blog/first-post",
"excerpt": "Lorem Ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
"body": "Lorem Ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem Ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
},
{
"id": 2,
"title": "Learn all about the JavaScript reduce method",
"cover": "https://uploads.sitepoint.com/wp-content/uploads/2021/10/1633515150jsreduce.png",
"slug": "blog/second-post",
"excerpt": "Lorem Ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
"body": "Lorem Ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem Ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
},
{
"id": 3,
"title": "Understanding React props",
"cover": "https://uploads.sitepoint.com/wp-content/uploads/2021/10/1633515109react-props-2.png",
"slug": "blog/third-post",
"excerpt": "Lorem Ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
"body": "Lorem Ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem Ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
}
]A matriz JSON contém postagens de blog que renderizaremos em nossa página de blog. Normalmente, esses dados devem ser obtidos de uma API e não armazenados em um objeto JSON.
A seguir, importe e use-o na marcação, assim:
// next-portfolio/pages/blog/index.js
import Posts from '../posts.json'
import Link from 'next/link'
export default function Blogs() {
return (
<div className="container">
<h1> Latest Posts </h1>
<div className="posts">
{Posts.map(post => {
return(
<div className="post" key={post.id}>
<img src={post.cover} />
<h2>{post.title}</h2>
<p>{post.excerpt}</p>
<Link href={post.slug}>
<a>Read Post</a>
</Link>
</div>
)}
)}
</div>
</div>
)
}Para melhorar a aparência da página, aqui estão alguns estilos:
// next-portfolio/styles/globals.css
/* BLOG PAGE */
.posts {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 50px;
max-width: 1200px;
margin: 0 auto;
}
.post-container {
margin: 15px auto;
max-width: 900px;
}
.post-container img {
width: 100%;
}
.post img {
height: 300px;
width: 500px;
}
.posts a {
background-color: black;
color: #D7E5f0;
padding: 10px 10px;
cursor: pointer;
margin: 30px 0;
border-radius: 6px;
}
.post {
background-color: white;
margin: 30px 0;
padding: 30px 30px;
border-radius: 6px;
}Agora, navegue para http: // localhost: 3000 / blog em seu navegador.
Exibindo uma única postagem e comentários aninhados
Nesta seção, faremos duas coisas:
- criar uma página para uma única postagem no blog
- criar uma rota aninhada dinâmica para mostrar comentários
Para fazer isso, entre pages/bloge crie uma nova pasta chamada [blog]. Dentro da pasta, crie dois arquivos, [índice] .js e [comentários] .js
my-site
└── pages
├── index.js // index route (will be rendered at my-site.com)
└── blog
├── index.js // list of blog post (my-site.com/blog)
└── [blog]
├── [index].js // (eg: my-site.com/blog/first-post)
├── [comments].js // (eg: my-site.com/blog/first-post/comments)
Navegue até [index] .js e digite o seguinte código:
import {useRouter} from 'next/router'
import Link from 'next/link'
import Posts from '../../posts.json'
export default function Blog() {
const router = useRouter();
const {blog} = router.query;
const fullPath = blog+"/comments";
if (blog === "first-post") {
return (
<div className="post-container">
<div>
<img src={Posts[0].cover} alt="post image" />
<h1> {Posts[0].title}</h1>
<p>{Posts[0].body}</p>
<p>{Posts[0].body}</p>
<p>{Posts[0].body}</p>
<hr />
<div className="comments">
<h3>Comments</h3>
<h5>Marina Costa</h5>
<p>Absolutely spot on! Thanks for sharing, Kingsley!</p>
<Link href={fullPath}>
<a>Read all comments for this article</a>
</Link>
</div>
</div>
</div>
)
} else if (blog === "second-post") {
return (
<div className="post-container">
<div>
<img src={Posts[1].cover} alt="post image"/>
<h1> {Posts[1].title}</h1>
<p>{Posts[1].body}</p>
<p>{Posts[1].body}</p>
<p>{Posts[1].body}</p>
<hr />
<div className="comments">
<h3>Comments</h3>
<p>Marina Costa</p>
<p>Absolutely spot on! Thanks for sharing, Kingsley!</p>
<Link href={fullPath}>
<a>Read all comments for this article</a>
</Link>
</div>
</div>
</div>
)
} else {
return (
<div className="post-container">
<div>
<img src={Posts[2].cover} alt="post image"/>
<h1> {Posts[2].title}</h1>
<p>{Posts[2].body}</p>
<p>{Posts[2].body}</p>
<p>{Posts[2].body}</p>
<hr />
<div className="comments">
<h3>Comments</h3>
<h5>Marina Costa</h5>
<p>Absolutely spot on! Thanks for sharing, Kingsley!</p>
<Link href={fullPath}>
<a>Read all comments for this article</a>
</Link>
</div>
</div>
</div>
)}
}Observe que, em um projeto real, você não precisará de uma ifinstrução condicional para renderizar com base no post :id. Isso ocorre porque você normalmente teria todas as postagens armazenadas em um banco de dados. Em seguida, você consultaria a API apenas para a postagem que corresponde ao ID da consulta.
O código para isso seria semelhante a este:
import Link from 'next/link'
export default function Blog( {post} ) {
return (
<div className="post-container">
<div>
<img src={posts.cover} alt="post image" />
<h1> {post.title}</h1>
<p>{post.body}</p>
<hr />
<div className="comments">
<h3>Comments</h3>
<h5>{post.commenter}</h5>
<p>{post.featured_comment}</p>
<Link href={post.fullPath}>
<a>Read all comments for this article</a>
</Link>
</div>
</div>
</div>
)}
}
export async const getStaticProps = ({ params }) => {
const res = await fetch(`https://your-api.com/posts/${params.title}`);
const post = await res.json();
return {
props: { post },
};
}Observe como eliminamos a necessidade de useRouter(). Isso ocorre porque getStaticProps()obtém automaticamente o ID da consulta do paramobjeto, que faz parte do objeto de contexto. Um objeto de postagem que corresponda a esse título é então recuperado da API e passado propspara o Blogcomponente.
Agora que estabelecemos a maneira correta de buscar dados externos, é hora de ver como ficaria uma única página de postagem: http: // localhost: 3000 / blog / first-post .
Rota aninhada de comentários
Você ainda se lembra do [comments].jsarquivo que criamos anteriormente? Next.js tratará esta página como uma página aninhada:
//next-portfolio/pages/blog/[blog]/[comments].js
import {useRouter} from 'next/router'
export default function Comments() {
const router = useRouter();
const {blog} = router.query;
return (
<div className="container">
<div>
<h2> You are now reading the comments from the {blog} </h2>
<div className="comments">
<h3>Comments</h3>
<hr />
<h5>Marina Costa</h5>
<p>Absolutely spot on! Thanks for sharing, Kingsley!</p>
<hr />
<h5>Marina Costa</h5>
<p>Absolutely spot on! Thanks for sharing, Kingsley!</p>
<hr />
<h5>Marina Costa</h5>
<p>Absolutely spot on! Thanks for sharing, Kingsley!</p>
<hr />
<h5>Marina Costa</h5>
<p>Absolutely spot on! Thanks for sharing, Kingsley!</p>
<hr />
<h5>Marina Costa</h5>
<p>Absolutely spot on! Thanks for sharing, Kingsley!</p>
<hr />
<h5>Marina Costa</h5>
<p>Absolutely spot on! Thanks for sharing, Kingsley!</p>
</div>
</div>
</div>
)
}Isso é o que você normalmente faria em um projeto da vida real:
export default function Comments( {comments} ) {
return (
<div className="container">
<div>
<h2> You are now reading the comments from the {blog} </h2>
<div className="comments">
{comments.map(comment => {
return(
<div className="comment" key={comment.id}>
<h5>{comment.name}</h5>
<p>{comment.body}</p>
<hr />
</div>
)}
)}
</div>
</div>
</div>
)
}
export async const getStaticProps = ({ params }) => {
const res = await fetch(`https://jsonplaceholder.typicode.com/blog-comments/${params.title}`);
const comments = await res.json();
return {
props: { comments },
};
}
Empacotando
O roteamento de página em Next.js é um dos conceitos mais importantes a se conhecer no Next. É também o recurso mais poderoso porque você pode estruturar seu site da maneira que quiser e transmitir dados entre as rotas aninhando-as.
Neste tutorial, aprendemos muito sobre a implementação de roteamento de página em Next.js construindo um site de portfólio simples. Espero que você tenha achado útil. Se você tiver algum feedback, entre em contato comigo no Twitter .
fonte: https://www.sitepoint.com/routing-in-next-js-beginner-guide/
What is GEEK
Buddha Community
1619443879
Como converter arquivos OST para o formato PST?
Os usuários têm duas maneiras de converter os arquivos OST para o formato PST do Outlook manualmente ou usando o aplicativo. A conversão manual dos arquivos OST leva muito tempo, assim como os esforços dos usuários. Portanto, os usuários devem usar uma ferramenta de conversão de OST para PST. O Datavare conversor OST para PST é a melhor solução para converter os arquivos OST para o formato PST do Outlook.
Para fazer a conversão dos arquivos OST, os usuários devem baixar este incrível aplicativo. Este aplicativo realiza a tarefa de maneira eficiente e sem esforço. Os usuários podem converter arquivos OST inteiros com a ajuda desta ferramenta incrível e em alta velocidade. Dados inteiros, incluindo notas, mensagens, contatos e calendários são convertidos para o formato PST com a ajuda desta ferramenta incrível. Além disso, os usuários são livres para salvar o arquivo convertido em qualquer lugar do sistema local. Com este aplicativo altamente compatível, os usuários podem usar facilmente este conversor OST para PST em qualquer um dos sistemas operacionais Windows. É um aplicativo altamente interativo que até mesmo um usuário novato pode usar. O aplicativo é uma plataforma segura e protegida para todos os usuários. As etapas necessárias para converter o arquivo OST para o formato PST são simples de implementar.
Os usuários são livres para salvar o arquivo em qualquer lugar em seu sistema local sem enfrentar qualquer dificuldade.
Passos para converter os arquivos
Siga as etapas fornecidas abaixo para converter os arquivos OST para o formato PST:
Etapa 1- Baixe a ferramenta Conversor de OST para PST em seu sistema operacional Windows
Etapa 2 - Inicie o aplicativo
Etapa 3- Adicionar os arquivos OST
Etapa 4 - Visualize os arquivos OST selecionados
Etapa 5 - Escolha o local para salvar os arquivos convertidos
Etapa 6 - Por fim, clique no botão “Converter agora”. Portanto, essas são algumas etapas simples com as quais um usuário pode converter facilmente seus arquivos OST para o formato PST do Outlook.
Recursos do aplicativo
Deixe-nos saber agora sobre alguns recursos inteligentes do aplicativo que um usuário deve ver:
Converta os arquivos OST
O aplicativo converte gratuitamente os arquivos OST para o formato PST do Outlook de forma fácil e confiável, sem enfrentar qualquer obrigação. A conversão direta dos arquivos OST é feita por esta ferramenta incrível. Além disso, os usuários podem usar o aplicativo em qualquer uma das versões do Windows, desde a versão mais recente até a mais antiga do aplicativo. O aplicativo converte todos os dados após visualizá-los e digitalizá-los. O tamanho dos arquivos OST não importa em todo o processo de conversão.
Precisão
Com total precisão, todo um processo de conversão é feito pelo aplicativo. Não importa o número de arquivos que o usuário insere, os usuários têm permissão para converter os arquivos de maneira perfeita. Todos os arquivos OST são facilmente exportados de maneira segura e protegida, sem qualquer tipo de perda ou corrupção de dados.
Localização especificada pelo usuário
Os arquivos OST convertidos podem ser salvos em qualquer lugar de acordo com o desejo do local específico do usuário. Flexibilidade total dos arquivos é fornecida pelo aplicativo para que o usuário não enfrente nenhum tipo de problema ao salvar o arquivo.
Aplicativo altamente compatível
É um aplicativo altamente compatível que pode ser usado em qualquer versão do Windows. Da versão mais antiga à mais nova do Windows, o aplicativo pode ser operado facilmente sem enfrentar qualquer dificuldade. A compatibilidade do aplicativo é incomparável de qualquer outro aplicativo. O resultado desejado é fornecido pelo aplicativo.
Declaração final
Baixe este incrível conversor de OST para PST para converter seus arquivos OST para o formato PST do Outlook. A integridade dos arquivos é mantida pelo aplicativo e a qualidade dos arquivos é mantida pelo aplicativo. Com este aplicativo altamente compatível, os usuários obtêm o resultado desejado pelos usuários. Além disso, você deve experimentar a versão demo do aplicativo para saber mais sobre o aplicativo. A versão demo do aplicativo é gratuita para todos os usuários. Esta versão demo do aplicativo dá aos usuários a autoridade para converter alguns arquivos OST. Para converter os arquivos ilimitados, o usuário deve comprar a versão licenciada do aplicativo agora.
Mais informações:- https://www.datavare.com/pt/conversor-ost-para-pst.html
#conversor de ost para pst #conversão ost para pst #import para pst #ost para pst exportador #exportar ost para pst #converter o arquivo ost para o formato de arquivo pst
1632537859
NBB: Ad-hoc CLJS Scripting on Node.js
Nbb
Not babashka. Node.js babashka!?
Ad-hoc CLJS scripting on Node.js.
Status
Experimental. Please report issues here.
Goals and features
Nbb's main goal is to make it easy to get started with ad hoc CLJS scripting on Node.js.
Additional goals and features are:
- Fast startup without relying on a custom version of Node.js.
- Small artifact (current size is around 1.2MB).
- First class macros.
- Support building small TUI apps using Reagent.
- Complement babashka with libraries from the Node.js ecosystem.
Requirements
Nbb requires Node.js v12 or newer.
How does this tool work?
CLJS code is evaluated through SCI, the same interpreter that powers babashka. Because SCI works with advanced compilation, the bundle size, especially when combined with other dependencies, is smaller than what you get with self-hosted CLJS. That makes startup faster. The trade-off is that execution is less performant and that only a subset of CLJS is available (e.g. no deftype, yet).
Usage
Install nbb from NPM:
$ npm install nbb -g
Omit -g for a local install.
Try out an expression:
$ nbb -e '(+ 1 2 3)'
6
And then install some other NPM libraries to use in the script. E.g.:
$ npm install csv-parse shelljs zx
Create a script which uses the NPM libraries:
(ns script
(:require ["csv-parse/lib/sync$default" :as csv-parse]
["fs" :as fs]
["path" :as path]
["shelljs$default" :as sh]
["term-size$default" :as term-size]
["zx$default" :as zx]
["zx$fs" :as zxfs]
[nbb.core :refer [*file*]]))
(prn (path/resolve "."))
(prn (term-size))
(println (count (str (fs/readFileSync *file*))))
(prn (sh/ls "."))
(prn (csv-parse "foo,bar"))
(prn (zxfs/existsSync *file*))
(zx/$ #js ["ls"])
Call the script:
$ nbb script.cljs
"/private/tmp/test-script"
#js {:columns 216, :rows 47}
510
#js ["node_modules" "package-lock.json" "package.json" "script.cljs"]
#js [#js ["foo" "bar"]]
true
$ ls
node_modules
package-lock.json
package.json
script.cljs
Macros
Nbb has first class support for macros: you can define them right inside your .cljs file, like you are used to from JVM Clojure. Consider the plet macro to make working with promises more palatable:
(defmacro plet
[bindings & body]
(let [binding-pairs (reverse (partition 2 bindings))
body (cons 'do body)]
(reduce (fn [body [sym expr]]
(let [expr (list '.resolve 'js/Promise expr)]
(list '.then expr (list 'clojure.core/fn (vector sym)
body))))
body
binding-pairs)))
Using this macro we can look async code more like sync code. Consider this puppeteer example:
(-> (.launch puppeteer)
(.then (fn [browser]
(-> (.newPage browser)
(.then (fn [page]
(-> (.goto page "https://clojure.org")
(.then #(.screenshot page #js{:path "screenshot.png"}))
(.catch #(js/console.log %))
(.then #(.close browser)))))))))
Using plet this becomes:
(plet [browser (.launch puppeteer)
page (.newPage browser)
_ (.goto page "https://clojure.org")
_ (-> (.screenshot page #js{:path "screenshot.png"})
(.catch #(js/console.log %)))]
(.close browser))
See the puppeteer example for the full code.
Since v0.0.36, nbb includes promesa which is a library to deal with promises. The above plet macro is similar to promesa.core/let.
Startup time
$ time nbb -e '(+ 1 2 3)'
6
nbb -e '(+ 1 2 3)' 0.17s user 0.02s system 109% cpu 0.168 total
The baseline startup time for a script is about 170ms seconds on my laptop. When invoked via npx this adds another 300ms or so, so for faster startup, either use a globally installed nbb or use $(npm bin)/nbb script.cljs to bypass npx.
Dependencies
NPM dependencies
Nbb does not depend on any NPM dependencies. All NPM libraries loaded by a script are resolved relative to that script. When using the Reagent module, React is resolved in the same way as any other NPM library.
Classpath
To load .cljs files from local paths or dependencies, you can use the --classpath argument. The current dir is added to the classpath automatically. So if there is a file foo/bar.cljs relative to your current dir, then you can load it via (:require [foo.bar :as fb]). Note that nbb uses the same naming conventions for namespaces and directories as other Clojure tools: foo-bar in the namespace name becomes foo_bar in the directory name.
To load dependencies from the Clojure ecosystem, you can use the Clojure CLI or babashka to download them and produce a classpath:
$ classpath="$(clojure -A:nbb -Spath -Sdeps '{:aliases {:nbb {:replace-deps {com.github.seancorfield/honeysql {:git/tag "v2.0.0-rc5" :git/sha "01c3a55"}}}}}')"
and then feed it to the --classpath argument:
$ nbb --classpath "$classpath" -e "(require '[honey.sql :as sql]) (sql/format {:select :foo :from :bar :where [:= :baz 2]})"
["SELECT foo FROM bar WHERE baz = ?" 2]
Currently nbb only reads from directories, not jar files, so you are encouraged to use git libs. Support for .jar files will be added later.
Current file
The name of the file that is currently being executed is available via nbb.core/*file* or on the metadata of vars:
(ns foo
(:require [nbb.core :refer [*file*]]))
(prn *file*) ;; "/private/tmp/foo.cljs"
(defn f [])
(prn (:file (meta #'f))) ;; "/private/tmp/foo.cljs"
Reagent
Nbb includes reagent.core which will be lazily loaded when required. You can use this together with ink to create a TUI application:
$ npm install ink
ink-demo.cljs:
(ns ink-demo
(:require ["ink" :refer [render Text]]
[reagent.core :as r]))
(defonce state (r/atom 0))
(doseq [n (range 1 11)]
(js/setTimeout #(swap! state inc) (* n 500)))
(defn hello []
[:> Text {:color "green"} "Hello, world! " @state])
(render (r/as-element [hello]))
Promesa
Working with callbacks and promises can become tedious. Since nbb v0.0.36 the promesa.core namespace is included with the let and do! macros. An example:
(ns prom
(:require [promesa.core :as p]))
(defn sleep [ms]
(js/Promise.
(fn [resolve _]
(js/setTimeout resolve ms))))
(defn do-stuff
[]
(p/do!
(println "Doing stuff which takes a while")
(sleep 1000)
1))
(p/let [a (do-stuff)
b (inc a)
c (do-stuff)
d (+ b c)]
(prn d))
$ nbb prom.cljs
Doing stuff which takes a while
Doing stuff which takes a while
3
Also see API docs.
Js-interop
Since nbb v0.0.75 applied-science/js-interop is available:
(ns example
(:require [applied-science.js-interop :as j]))
(def o (j/lit {:a 1 :b 2 :c {:d 1}}))
(prn (j/select-keys o [:a :b])) ;; #js {:a 1, :b 2}
(prn (j/get-in o [:c :d])) ;; 1
Most of this library is supported in nbb, except the following:
- destructuring using
:syms - property access using
.-xnotation. In nbb, you must use keywords.
See the example of what is currently supported.
Examples
See the examples directory for small examples.
Also check out these projects built with nbb:
- c64core: retrocompute aesthetics twitter bot
- gallery.cljs: script to download walpapers from windowsonearth.org.
- nbb-action-example: example of a Github action built with nbb.
API
See API documentation.
Migrating to shadow-cljs
See this gist on how to convert an nbb script or project to shadow-cljs.
Build
Prequisites:
- babashka >= 0.4.0
- Clojure CLI >= 1.10.3.933
- Node.js 16.5.0 (lower version may work, but this is the one I used to build)
To build:
- Clone and cd into this repo
bb release
Run bb tasks for more project-related tasks.
Download Details:
Author: borkdude
Download Link: Download The Source Code
Official Website: https://github.com/borkdude/nbb
License: EPL-1.0
#node #javascript
1616751081
Conversor EML para PST - Livre EML em PST para Converter Arquivo EML para PST
Tente EML para Outlook PST Converter para converter seus arquivos EML em formato Outlook PST de forma inteligente, sem enfrentar qualquer tipo de problema. O aplicativo realiza sua tarefa de conversão de forma confiável, sem obter nenhum tipo de erro ou fazer qualquer alteração nos arquivos EML que você selecionará para conversão. Vários arquivos EML podem ser selecionados por meio deste aplicativo pelos usuários sem obter nenhum erro. O aplicativo oferece um excelente resultado de conversão para seus usuários. Possui uma velocidade computacional e funciona perfeitamente em qualquer versão do aplicativo Windows, os usuários não precisam usar um sistema específico para converter seus arquivos EML para o formato Outlook neste incrível aplicativo.
Sobre o conversor de EML para Outlook
O aplicativo é simplesmente uma interface amigável que fornece uma plataforma bem simplificada para que seus usuários façam a tarefa de conversão com facilidade. Além disso, o aplicativo pode ser processado por qualquer usuário não técnico ou técnico sem qualquer tipo de problema devido à sua interface amigável. O aplicativo pode converter seus vários arquivos EML de uma só vez, pois o aplicativo é capaz de converter os arquivos EML em massa. O aplicativo também pode criar um arquivo PST do Outlook de grande porte, convertendo os arquivos EML em um monte.
É um aplicativo bem projetado, adequado para qualquer versão do Windows e compatível com qualquer versão dos arquivos do Outlook. Além disso, ele migra arquivos EML para um cliente de e-mail de suporte. Nenhuma assistência técnica é necessária para usar o aplicativo. Além disso, você pode salvar os dados convertidos em qualquer lugar de sua escolha, sem qualquer obrigação. É uma ferramenta de conversão de EML para Outlook PST rápida e bem mantida que atende a todas as expectativas dos usuários.
Você pode experimentar a versão demo do aplicativo e tentar converter alguns arquivos EML.
Principais recursos atraentes do aplicativo
O aplicativo consiste em atributos-chave que são usados para facilitar o trabalho da conversão. Esses recursos são fornecidos abaixo, vamos ver os seguintes recursos:
Apenas arquivos EML são convertidos
Apenas os arquivos EML são convertidos no formato PST do Outlook pelo aplicativo sem qualquer obstáculo. O aplicativo é um aplicativo simples e classificado que converte os arquivos EML diretamente no formato do Outlook. Independentemente do tamanho dos arquivos EML, o aplicativo converte os dados de maneira simplificada.
Conversão de arquivo em massa
A conversão em massa dos dados está sendo seguida pelo aplicativo sem qualquer obstáculo. Os usuários podem converter não um ou dois, mas muitos arquivos EML, usando este aplicativo incrível sem qualquer estresse de perda de dados. O aplicativo é adequado para uso e oferece total privacidade aos seus dados.
Resultado de conversão desejável
O aplicativo suporta a conversão seletiva de arquivos, portanto, um resultado desejável é fornecido aos usuários. Em um único processo de conversão, um resultado preciso e desejável é concedido aos usuários pelo aplicativo.
Salvando no local desejado
Os arquivos convertidos são salvos no local desejado pelos usuários. Portanto, o aplicativo gerencia seus dados de maneira inteligente, sem nenhum problema.
Salvar dados manualmente
O aplicativo oferece suporte ao salvamento manual dos dados que são convertidos pelo aplicativo. Os usuários podem salvar os arquivos convertidos em qualquer lugar que desejarem. Os dados convertidos podem ser salvos em qualquer local no sistema local do usuário.
Fácil de organizar
O aplicativo organiza seus dados e os mantém em uma ordem hierárquica. Nenhum tipo de assistência técnica é necessária para executar o aplicativo. Usuários de qualquer plano de fundo sentem-se fáceis de usar o aplicativo sem nenhum obstáculo.
Passos a serem seguidos
Existem etapas que um usuário deve seguir para concluir sua tarefa de conversão. Essas etapas básicas podem ser realizadas por qualquer usuário novato. Vejamos essas etapas;
Etapa 1 - Instale o aplicativo em seu sistema Windows
Etapa 2 - Inicie o aplicativo
Etapa 3- Selecione os arquivos EML que você precisa converter
Etapa 4 - Escolha o modo em que deseja converter seus arquivos EML em
Etapa 5 - Agora, escolha o local para salvar seus arquivos EML convertidos.
Passo 6 - Finalmente, clique no botão converter para finalizar sua tarefa de conversão.
Estas são algumas etapas básicas e simples que podem ser executadas por qualquer usuário iniciante.
Declaração conclusiva
Este aplicativo avançado é projetado de forma que nenhum usuário encontre qualquer tipo de problema em fazer a tarefa de conversão. O aplicativo é um aplicativo bem simplificado de usar.
Experimente uma versão demo do aplicativo, esta versão demo está disponível gratuitamente para qualquer usuário. No entanto, a versão demo permite apenas a conversão de alguns arquivos. Para conversão ilimitada, os usuários precisam comprar a versão licenciada do aplicativo.
Mais informações:- https://www.datavare.com/pt/conversor-eml-para-pst.html
#conversor eml para pst #converter arquivo eml para arquivo pst #exportar arquivo eml para arquivo pst #importar arquivo eml para arquivo pst #window live mail to pst #eml to pst importer
1616046771
Como converter seus arquivos EML em conta do Hotmail sem qualquer perda de dados?
O usuário agora pode converter seus arquivos EML em uma conta do Hotmail usando o Datavare EML para Hotmail Converter. Este aplicativo foi projetado de forma a facilitar a conversão de arquivos EML. Sem instalar qualquer outro aplicativo, todos os seus arquivos EML são convertidos por este conversor sem problemas. Além disso, você tem permissão para importar a maior parte dos arquivos EML e também pode carregar esses arquivos em sua conta do Hotmail Cloud. O aplicativo é simples e organizado e faz a tarefa de conversão. Qualquer tipo de ferramenta de suporte não é exigida pelo aplicativo. Além disso, você encontrará um resultado preciso pelo aplicativo.
Qualquer usuário sem formação técnica pode baixar o EML para Hotmail Conversor e conversor seus arquivos EML, pois o aplicativo é fácil de manusear e pode ser usado em qualquer aplicativo do Windows. O aplicativo também oferece grandes benefícios para seus usuários. Esses benefícios tornam a aplicação mais versátil e fácil de trabalhar. Você pode baixar este aplicativo notável em qualquer versão do Windows e pode carregar seus arquivos EML em sua conta do Hotmail sem erros. Além disso, é aconselhável instalar a versão de teste do aplicativo antes de comprar a versão licenciada, pois o usuário descobrirá se vale a pena usar o aplicativo ou não, convertendo seus poucos arquivos EML em uma conta do Hotmail na versão de teste. Esta versão está disponível gratuitamente para todos os usuários.
Medidas de conversão
Para converter seus arquivos EML, o usuário deve seguir alguns passos que são fáceis de executar e podem ser executados por qualquer usuário, mesmo que não possua nenhum conhecimento técnico. Vamos prosseguir com estas etapas:
Etapa 1- Em primeiro lugar, instale o aplicativo em seu sistema operacional Windows
Etapa 2- Em seguida, inicie o aplicativo
Etapa 3- Navegue pelos arquivos EML que você deseja converter
Etapa 4 - Digite o nome de usuário e a senha da conta do Hotmail.
Etapa 5 - Selecione a pasta onde deseja salvar seus arquivos convertidos, você também pode criar uma pasta para salvar os arquivos convertidos.
Passo 6 - Clique com o botão direito do mouse no botão “Start Uploading”.
O aplicativo levará alguns minutos e fornecerá um resultado preciso. Além disso, essas etapas são fáceis de operar.
Dê uma olhada nesses recursos avançados!
O aplicativo possui muitos recursos avançados que o tornam mais confiável e versátil de usar. Dê uma olhada em alguns destes recursos avançados:
-
• Conversão sem erros
O aplicativo garante que todos os seus dados sejam convertidos sem erros. Portanto, um resultado 100% preciso é garantido aos seus usuários sem enfrentar qualquer tipo de problema. -
• Upload múltiplo
Os usuários têm a opção de converter quantos arquivos quiserem, pois o aplicativo oferece suporte para uploads múltiplos de dados. O aplicativo permite que vários arquivos sejam carregados e os converta de maneira adequada. -
• Manuseio único
Para realizar a tarefa de conversão não é necessário instalar nenhum outro tipo de aplicativo para concluir a tarefa de conversão. O aplicativo converte facilmente os arquivos EML em uma conta do Hotmail. -
• Suporta conversão saudável
Os arquivos devem realizar o processo de conversão de forma bem simplificada para que seja necessária uma conversão saudável. O aplicativo é capaz de converter os arquivos EML em Hotmail de maneira saudável. Sem qualquer corrupção de dados, arquivos saudáveis -
• são convertidos por este conversor inteligente.
Esses recursos são o principal fator responsável por converter os arquivos EML em uma conta do Hotmail de maneira adequada, garantindo que todos os arquivos sejam gerenciados adequadamente sem qualquer perda.
Palavras Finais
Para obter uma conversão bem simplificada e saudável de arquivos EML, o usuário deve fazer o download de um conversor. Portanto, para obter o melhor resultado de conversão, baixe o conversor EML para Hotmail. O conversor possui muitos recursos avançados que o ajudarão a converter os arquivos de forma fácil e notável.
Continue com este aplicativo inteligente baixando sua versão de teste. Essas versões de teste podem ser baixadas por qualquer usuário e são gratuitas. Além disso, se você enfrentar qualquer tipo de problema de trabalho ou conversão, pode entrar em contato com o número de atendimento ao cliente que está sempre disponível para os usuários.
Mais informações:- https://www.datavare.com/software/eml-to-hotmail-converter-expert.html
#eml para importador de pdf #conversor de eml para pdf #importar eml para pdf #converter eml para pdf #conversão de eml para pdf
1615785369
Converta e-mails EML para Adobe PDF com o conversor de EML para PDF
Para converter arquivos EML em formato PDF, o Datavare é o aplicativo mais adequado. O aplicativo oferece muitas vantagens para que os usuários possam converter os arquivos facilmente. Isso ajuda a fazer uma conversão direta. O aplicativo é mais adequado para cada usuário e, portanto, converte os arquivos EML de uma forma precisa e sem erros. Qualquer usuário pode fazer a conversão de arquivos EML para o formato PDF, pois o aplicativo é muito fácil de operar. Usuários sem formação técnica também podem usar este aplicativo incrível sem qualquer problema.
Embora o aplicativo seja muito avançado, ainda assim, com sua interface gráfica amigável, é fácil converter arquivos EML para o formato PDF. Para tal não é necessária qualquer tipo de assistência técnica. A tarefa de conversão é fácil e simples de fazer com este aplicativo de terceiros. É um aplicativo altamente compatível que funciona perfeitamente em qualquer versão do Windows. Para usar o aplicativo, não é necessário que a versão do Windows seja a mais recente ou a mais antiga.
Além disso, há muitas vantagens em usar esse aplicativo notável. Vamos falar sobre algumas dessas vantagens que ela confere:
- Concede conversão direta
- Transfere arquivos em alta velocidade
- Sem restrição de tamanho
- Aplicação independente
- Conversão sem erros
Essas vantagens tornam o aplicativo mais adequado para uso. Vale a pena usar este aplicativo para converter arquivos EML em formato PDF. Baixe sua versão de teste agora.
Passos para conversão
Para continuar a tarefa de conversão, é necessário seguir alguns passos. O processo de conversão ocorre em um processo passo a passo. Essas etapas são muito fáceis de executar por qualquer usuário. Não há necessidade de nenhuma orientação técnica para auxiliar essas etapas.
Agora, vamos apenas dar uma olhada nessas etapas simples, depois de baixar e iniciar o aplicativo;
Passo 1- Abra o aplicativo e escolha os arquivos EML que você deseja apenas converter.
Etapa 2 - Escolha o local onde deseja salvar os arquivos convertidos.
Etapa 3- Clique no botão converter agora.
Com essas 3 etapas fáceis, você pode converter seus arquivos EML em formato PDF.
Essas etapas são muito fáceis, e o aplicativo também fornece instantâneos adequados das etapas fornecidas para a assistência adequada do usuário. Além disso, uma interface de usuário fácil é fornecida pelo aplicativo para oferecer suporte a seus usuários. Em primeiro lugar, use a versão demo do aplicativo.
Características principais
Com muitas vantagens, o aplicativo também disponibiliza alguns recursos fundamentais aos seus usuários para a melhor conversão dos arquivos EML. Vejamos alguns desses recursos:
• Conversão perfeita
Com uma velocidade rápida, é imprescindível que seus arquivos sejam convertidos na perfeição, sem nenhuma alteração dos dados. Este aplicativo é adequado para converter seus dados na perfeição.
• Conversão seletiva
É necessário que os arquivos que você escolher sejam os que somente devem ser convertidos. Portanto, este aplicativo inteligente converte apenas os arquivos que você seleciona para a conversão. Não, outros arquivos EML são convertidos para o formato PSF.
• Conversão em lote
Os dados que você escolher são convertidos em lotes. Isso significa que você pode escolher os arquivos que deseja converter ou pode escolher a pasta. Somando-se a isso, a filtragem de arquivos é fornecida no modo de arquivo
• Salve os dados de acordo
Você pode escolher os arquivos a serem convertidos, bem como o local. O aplicativo oferece suporte ao salvamento personalizado de dados. Isso significa que, sem qualquer obrigação, você pode salvar seus dados de forma fácil e adequada. Esses recursos fornecem um resultado proveitoso para os usuários.
Declaração final
Os usuários podem baixar o EML para PDF Converter para converter seus arquivos EML para o formato PD. O aplicativo é fácil de usar em qualquer versão do Windows. O usuário pode converter quantos arquivos quiser sem qualquer obrigação, uma vez que adquira a versão licenciada do aplicativo.
Recursos como conversão em alta velocidade, excelente precisão e grande compatibilidade tornam o uso do aplicativo mais útil. Este aplicativo independente executa a tarefa de conversão diretamente sem qualquer problema. Portanto, experimente a versão demo gratuita do aplicativo agora e examine-o convertendo seus poucos arquivos EML em formato PDF.
Se você enfrentar algum tipo de problema também pode entrar em contato com o número de atendimento ao cliente fornecido pelo aplicativo ao seu usuário. Este serviço de ajuda ao cliente está disponível 24 horas por dia, 7 dias por semana.
Mais informações:- https://www.datavare.com/software/eml-to-pdf-converter-expert.html
#conversor de eml para pdf #migração de eml para pdf #exportador de eml para pdf #converter eml para pdf #importar eml para pdf